Bootstrap

HTML基础标签及其语义

一、HTML语法规范

1.1、基本语法表述

<html></html>#标签通常都是成对出现(双标签),开始结束标签

<br />#单标签

1.2、标签关系

包含关系与并列关系

包含关系

<head>#父标签

           <title> </title>#子标签

<head>

并列关系

<head> </head>

<body> </body>

1.3、HTML基本结构标签

骨架标签,页面内容也是在这些基本标签上书写

<html>#根标签

          <head># 头部标签

                <title>我的第一个页面</title>  # 网页标题

        </head>

        <body>

                  你我之间,月薪过万  # 文档的所有内容

        </body>

</html>

vscode中!可以快速生成骨架

1.4、<!DOCTYPE>文档类型声明,作用是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>:当前页面采取的是HTML5版本来显示网页,不属于HTML

1.5、<html lang="en">定于文档显示语言,en定义为英语,zh-CN定义语言为英文,作用为提示

1.6

<meta charset="UTF-8">字符集:十多个字符的集合,以便计算机能够识别和存储各种文字,同样防止乱码。  meta:元标签

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

1.7<hr>

作用:添加水平线

 1.标题标签<h1>-<h6>(重要)

<h1> I am first title </h>

标签语义:作为标题使用,并且依据重要性递减

特点:

1).加了标题的文字会变得加粗,字号也会变大

2).一个标题独占一行

2.段落和换行标签(重要)

<p>我是一个段落标签</p>

标签语义:将文档分段

3.段落和换行标签

<br />

标签语义:强制换行

特点:只是简单的开始新的一行,跟段落不一样

4.文本格式化标签

使文字加粗、具有下划线、斜体等效果、

标签语义:突出重要性,比普通文字更加重要。

都推荐使用前者,语义更加强烈

加粗:<strong> </strong>或者<b></b>

倾斜:<em></em>或者<i></i>

删除线:<del></del>或者<s></s>

下划线:<ins></ins>或者<u></u>

5.<div>和<span> 均为双标签,前者表示分割、分区,span表示跨度、跨距

用来布局网页,没有语义,他们就是一个盒子,用来装内容。

<div>hello</div>:独占一行

<span>勇士</span>

<span>篮网</span>

输出结果为:勇士 篮网

6.图像标签和路径

(1)图像标签

<img src='图像URL' />:src是<img>标签的必须属性,用于指定图像文件的路径和文件名

重点:图片位置必须和.html在同一个文件中

(2)路径

相对路径:以应用文件所在的位置为参考基础,而建立出的目录路劲,图片相对于HTML页面的位置

如果在同一根目录下,新建了一个文件夹存储图片,则使用下一级路径

绝对路径:目录下的绝对位置

7.超链接标签(拥有title属性)

<a>标签:定义超链接,作用是从一个页面到另一个页面

(1)链接的语法格式

<a href='跳转目标' target=’目标窗口的弹出方式‘>文本或图像</a>

target如果选用_self属性的话,则是覆盖原网站,在原网站的基础上打开新的网站

(2)链接分类

1.外部链接,

2.内部链接,网站内部之间的

3.空链接:<a href='#'></a>

4.下载链接:同理可得,只是内容变成了XXX.zip

5.网页元素链接:文本视频表格图像等等都可以添加链接

如图所示,图片也可以添加超链接

6.锚点链接:网页内部导航,快速定位到页面中的某个位置

返回顶部制作

8.HTML中的注释和特殊字符

(1)注释

<!--开头,以-->结束

ctrl+/快速添加注释

(2)特殊字符

9.表格标签

(1)表格的作用

主要英语显示数据,可以让数据现实的非常规整。

(2)表格的基本语法

<table></table>适用于定义表格的标签

<tr></tr>用于定义表格中的行的,必须嵌套在<table>双标签中,

<td></td>用于定义表格中的单元格,必须嵌套在<tr>双标签中

字母td指表格数据(table data),即数据单元格的内容

(3)表头单元格标签

会加粗居中显示

(4)表格属性

实际开发不经常用,一般使用css来设置

(5)表格结构标签

<thead>表格头部区域

<tbody>表格身体区域

更好的分清楚表格的区域

(6)合并单元格

1.合并单元格的方式

跨行合并:rowspan="合并单元格的个数"

跨列合并:colspan="合并单元格的个数"

2.目标单元格(写合并代码)

跨行:最上侧单元格为目标单元格,写合并代码

跨列:最左侧单元格为目标单元格,写合并代码

3.合并单元格

1.确定跨行还是跨列

2.找到目标单元格。写上合并方式=合并单元格的数量。如:<td colspan="2"></td>

3.删除多余的单元格

10.列表标签

作用:列表用来布局

特点:整齐、简洁、有序,作为布局会更加的自由和方便

分类:

无序列表、有序列表、自定义列表

(1)无序列表--重点

<ul>(双标签)定义无序列表,一般会以项目符号呈现列表项,二;列表项使用<li>定义

<ul>中只能放<li>, <li>中可以放任何标签

样式属性通常由CSS设置

(2)有序列表--理解

各个选项中有一定的顺序

<ol>定义有序列表,<li>定义,自动编号

语法同无序列表

样式属性有CSS设置

(3)自定义列表--重点

使用场景:对于术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号

<dl>定义自定义列表,<dt>,<dd>描述dt,并列关系

注意点:<dl>中只能出现dt和dd

11.表单标签

作用:收集用户信息

如填写手机号、住址等

(1)组成

表单域、表单控件(表单元素)、提示信息三个部分组成

(2)表单域

包含表单元素的区域

在HTML标签中,<form>用于定义表单域。以实现用户信息的收集和传递

<form>会把它范围内的表单元素信息提交给服务器(暂时不需要掌握)

(3)表单控件(表单元素)

input输入表单元素

select下拉表单元素

textarea文本域元素

1.<input>

<input type="属性值" />

(4)<label>

用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,来增加用户体验

使用方如下:

2.select下拉表单

作用:避免占用网页位置

<option>中定义selected=“selected”时,为默认选中项

3.textarea

应用场景:当用户输入内容较多的情况下,可以使用此标签,可以定义为多行输入

如留言板、评论等等

  • 1.name和value是每个表单元的属性值,主要给后台人员使用
  • 2.name表单元素的名字,要求单选按钮和复选框要有相同的name值
  • 3.checked属性:会默认勾选某个选项
  • 4.maxlength:
  • 5.submit:将数据提交给后台
  •   在链接文本的href属性中,设置属性值为#名字的形式,如<a href='#two>第二集</a>
  •        找到目标位置标签,里面添加一个id属性=刚才的名字,如:<h3 id="two>第二集介绍</h3>

;