其他分享
首页 > 其他分享> > 【黑马pink老师的H5/CSS课程】(二)标签与语法

【黑马pink老师的H5/CSS课程】(二)标签与语法

作者:互联网

视频链接:P8~P29
黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动

参考链接:
HTML 元素

1.HTML语法规范

1.1 基本语法概述

  1. HTML 标签是由尖括号包围的关键词,例如<html>
  2. HTML 标签 通常成对出现,例如 开始标签结束标签 ,当然也有单标签</br>

1.2 标签关系

包含关系:

比如 head标签包含title标签

并列关系:

比如 head标签跟body标签并列

2.HTML 基本结构标签

写HTML网页

每个网页都有一个基本的结构标签(也叫:骨架标签),页面内容在这些基本标签上书写。

标签名 定义 说明
<html></html> HTML标签 页面中最大的标签,根标签
<head></head> 文档的头部 title被包含在head中
<title></title> 文档的标题 让网页有自己的标题
<body></body> 文档的主体 元素包含在文档的所有内容,内容放在body里

HTML文档的后最必须是 .html 或 .htm

3.使用VScode

安装的看网上教程。

基本使用快捷键:

Ctrl + N 新建文件
Ctrl + S 保存文件
Ctrl + 加号键/减号键 可以放大缩小视图

原来可以在VScode的HTML文件里 输入 英文键 的 ! 就可以弄出H5的基本结构了,我之前是不知道的,但就是要换成win10自带的英文输入键比较麻烦。

显示效果:

推荐安装的插件:

上图这个插件的使用方式:右键

下面的也同样点击安装即可

结构解释

文档类型声明标签

<!DOCTYPE>文档类型声明,作用就是高数浏览器用哪个版本来显示网页,下面的这句代码就是说要用H5版本。

lang语言种类

用来定义当前文档显示的是英文网页

当然也可以定义为zh-CN,lang的功能还可以提示浏览器是否要进行翻译选择

字符集(Character set)

定义:多个字符的集合,便于计算机能够识别和存储各种文字

<head>标签内,可通过<meta>标签的charset属性来规定 HTML 文档 应该使用哪种字符编码。

UTF-8比较常用,当然还有GBK、GB2312

4.HTML常用白哦去

4.1标签语义

利用标签语义在合适的地方令显示出来的内容与结构方便合理,比如小说网站。

4.2标题标签 <h1>-<h6>

当标题用,数字就对应着重要等级。

<h1>一级</h1>
<h2>二级</h2>

4.3段落和换行标签

<p>标签定义段落

<p>一级手动阀手动阀手动阀</p>
<p>二级顶顶顶撒</p>

可以看到分段了

<br />换行标签,是单标签,可以令一段文字可以另起一行。

<p>一级手动阀手动<br />阀手动阀</p>

4.4文本格式化标签

粗体斜体下划线

语义 标签
加粗 <strong></strong><b></b>
倾斜 <em></em><i></i>
删除线 <del></del><s></s>
下划线 <ins></ins><u></u>

4.5 <div>和<span>标签

这两个标签无语义,是个盒子,用来装内容的

<div> 大盒子1 </div>123
<div> 大盒子2 </div>
<span>小黄</span>
<span>小白</span>
<span>小红</span>

特点:

  1. 标签用来布局,但是只能一行放一个大盒子
  2. 标签用来布局,一行可以排成一列多个小盒子

4.6 图像标签和路径

  1. 图像标签
    单标签<img>用于定义HTML页面的图像
<img src = "图像URL" alt="" title="" width="" height=""/>

src<img>标签的必须属性,用于制定图像文件的路径和文件名。
其他属性:

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本,当图像不能显示的时候,就显示的文字
title 文本 提示文本,鼠标放到图像上,就显示文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细
  1. 路径
    就放文件到对应文件夹,比如目录文件夹专门放HTML文件和图片文件

根目录:就是打开文件夹目录的第一级目录

路径可分为:

  1. 相对路径:以应用文件所在位置参考,比如图片jpg文件相对于HTML页面的位置
分类 符号 说明
同一级路径 图片文件位于HTML文件同一级目录,写法为<img src="图像URL" />
下一级路径 / 图片文件位于HTML文件下一级目录image中,写法为<img src="image/图片.jpg" />
上一级路径 ../ 图片文件位于HTML文件上一级目录,写法为<img src="../图片.jpg" />
  1. 绝对路径
    目录下的绝对位置,直达目标位置,从本地的盘符开始,比如"D:\Web\img.jpg"或者网络上的绝对地址"http://www.XXXXX.com/img.jpg"

4.7超链接标签

<a>标签用于定义超链接,可以从当前的页面到另一个页面

<a href="跳转目标" target="目标窗口弹出的方式"> 文本或图像 </a>
属性 作用
href 指定目标的URL,必须属性
target 指定链接页面的打开方式,其中_self为默认值从当前窗口打开,_blank为在新窗口打开

链接分类:

  1. 外部链接:比如<a href="http://www.baidu.com">百度</a>
  2. 内部链接:就网站内部页面之间相互链接,可以自建,例<a href = "index.html">首页</a>
  3. 空连接:不指定明确的连接目标,<a href = "#">首页</a>
  4. 下载链接:需要href的地址是一个文件或压缩包,在我们点击后,浏览器自动会帮我们下载。
  5. 网页元素链接:在网页中的各种网页元素,比如文本、图像、表格加上超链接
  6. 锚点链接:点击后可以快速定位并跳导页面中的指定位置,比如以下例子

4.8 注释和特殊字符

<!-- 注释的语句 -->  快捷键 :ctrl + /

特殊字符:就是不方便直接敲出来,就用字符替换掉

标签:pink,文件,标签,H5,HTML,文档,链接,CSS,属性
来源: https://www.cnblogs.com/PaturNax/p/16415767.html