HTML入门

HTML语法与基础标签

互联网基本原理

1.在本地进行开发，然后上传到服务器进行共享。
2.输入网址即是进行一个HTTP请求，然后服务器识别发出来HTTP请求。服务器识别出后将网页发送给用户，这一过程是HTTP响应。
HTTP协议 超文本传输协议

一、head标签对

1. head标签对是网页的配置，并不是网页的头部。
2. body标签对中书写网页的内容，包括网页的头部、主要内容、页脚等各个部分。
3. charset属性规定使用哪种字符编码。我们常用的字符集有两种，分别是UTF-8和gb2312。

• UTF-8:适用于制作有非汉字文字的网页。
• gb2312：制作只有汉语和英语的网页，由于1个汉字仅占2字节，网页文件尺寸明显减少。
  注： 在vscode中编码时，要设置vscode编辑器的字符集和网页字符集一致，否则会出现乱码。
  

4. meta元标签利用name属性值为Keywords属性来设置页面关键字，关键字内容用content来编写。
   meta元标签用name属性值为Description来设置页面描述，描述内容用content编写。

二、body标签对

1.基础标签

标题标签(一级到六级)	h1~h6
段落标签(其中不能嵌套h标签和其他p标签)	p
盒子模型(将相关的内容放到一起)	div
无序列表	ul(无序列表)配套li(每个列表项 内容)
有序列表	ol配套li
定义列表	dl嵌套dt(定义数据项)和dd(数据定义)
图片标签	img(单)
超链接	a
音频	audio(兼容到IE9)
视频	video
文本中的区块标签	span
表单标签	form

2.HTML5推出了众多新的区块标签

区块标签	说明
section	文档的区域，语义比div大
article	文档的核心文章内容，会被搜索引擎主要抓取
aside	文档的非必要相关内容，比如广告等
nav	导航条
header	页头
main	网页核心部分
footer	页脚

3.表单中的标签

表单标签	说明
input 单标签	输入控件(属性type的值不同，代表不同的控件)
select	下拉菜单（option是内部选项）
textarea	多行文本框

4.HTML5中新增的表单控件

type属性值	控件
color	颜色选择控件
date、time	日期、时间选择控件
email	电子邮件输入控件
file	文件选择控件
number	数字输入控件
range	拖拽条
search	搜索条
url	网址输入控件

（当type为text时，可以结合datalist控件，可以为输入框提供一些备选项，当用户输入的内容与备选文字相同时，将会显示智能感应。）

5.表格标签

标签	含义
table	表格标签
tr	行
td	列
th	标题小格（表头）

6.细化

01无序列表和有序列表

1. ul和ol标签里只能放li列表项，而li里可以有其他的标签内容
   
   
   
2. 有序列表ol的一些属性：
   1）type属性（HTML5中已废弃），值：a（表示小写英文字母的编号），A（表示大写英文字母的编号），i（表示小写罗马数字的编号），I（表示大写罗马数字的编号），1（表示数字编号 默认的）
   2） reversed属性 指定列表中的条目是否是倒序排列的
   3）start属性 值必须是一个整数，指定了列表编号的起始值。此属性的值应为阿拉伯数字。
   

02媒体和语义化标签

img标签的属性

1. src属性
   src属性是指图片的路径。
   相对路径：
   描述从网页出发，如何找到图片。我们src下所使用的存放在项目文件夹下的就是相对路径。
   如果需要回退层级，则需要“…/”这样的写法。与当前文件同级时也可以书写“./”
   绝对路径：
   描述图片的精准地址，比如图片的网址
2. alt属性
   ·alt属性对图像的文本描述，非必写属性
   ·如果由于某种原因网页无法加载图像，则在网页上就会显示alt的值，对图像的描述
   ·供视力不方便的朋友使用网页朗读器，也会朗读alt中的文本
3. width和height属性
   单位是像素，但是书写的时候不需要写单位px

超链接a标签

1. href属性
   href其值为链接的地址，支持相对路径和绝对路径
2. title属性
   设置鼠标悬停到链接上的文本
3. target属性
   此属性用来设置要跳转到的网页在哪个窗口打开。默认在当前页面打开新网页。值为blank时代表在新标签页中打开网页。
4. 页面内锚点
   可以理解为在页面内定位，可以在较长的页面上使用。在h系列标签上添加一个id属性成为锚点，然后在链接上拼接上 #id ，就可以直接跳转定位到页面内此标签内容的位置上，其他页面跳转到此页面时，也可以链接到指定锚点。
   注：<a href="#top"></a> 直接跳转到页面顶部

<h id="wuxi"></h>

<a href="lvyou.html#wuxi">无锡旅游攻略</a>

5. 下载链接
   指向exe、zip、rar等文件格式的链接，将会自动成为下载链接。
6. 邮件链接和电话链接
   有mailto:前缀的链接是邮件链接，系统将自动打开Email相关的软件。

<a href="mailto:123456789@qq.com">给123456789发送邮件</a>

有tel:前缀的链接是电话链接，系统将自动打开拨号盘。

<a href="tel:123456789">给123456789打电话</a>

音频标签audio

<audio controls src="音频地址">抱歉，您的浏览器不支持audio标签，请升级浏览器。</audio>

1. controls 显示播放控件，src是音频的地址，audio标签中的文字在浏览器不支持audio时显示，支持的时候不显示。
2. autoplay属性 音频会自动播放
3. loop属性 将循环播放音频
   video于此相同

03表单标签

form为表单标签。
属性action
属性name

表单控件以及属性

1. input
   type=text时为文本输入框

属性	含义
type	输入框的类型，text文本类型
value	输入框的默认值
placeholder	输入框的提示文字
disabled	输入框禁用

type属性值为radio时为单选按钮：
·互斥的单选按钮应该设置它们的name属性的值相同
·单选按钮要有value属性值，value属性的值就是单选按钮向服务器提交的值
·单选按钮添加的checked，即为默认选中
（此时有个问题就是想要选择这个单选按钮只能点击文字前面的圆点，点击文字起不到选择的作用，解决这个问题使用label标签）
·label标签用来将文字和单选按钮进行绑定，用户单击文字的时候也视为点击了单选按钮（label包裹住input标签）
type属性值为checkbox时为复选框，规则同单选按钮

type属性值为password时可以创建密码框
type属性值为button时为普通按钮，可以直接简写成button（按钮上的提示文字写在闭合标签中）
type属性值为submit时为提交按钮
type属性值为reset时为重置按钮
input形式的按钮上的提示文字要写在value属性中
select为下拉列表，option为选项，value为提交的值（传给后台执行程序的值）。
2. textarea
cols列数 rows行数

04表格标签以及属性

1. table表格标签
   属性border：表格的边框（默认是双线表格）
   属性caption：表格的标题，通常作为table的第一个子元素出现（默认和表格一样宽）
   属性width：表格的宽度
   属性height：表格的高度
   属性align:调整table整体的位置（left、center、right）
   属性cellspacing：是指单元格间距，是设置单元格与单元格之间的距离（可以用来设置单线的边框，值设为0）
   属性cellpadding：设置单元格高度；cellspacing属性值越大，单元格和单元格之间的间距也就越大（已废弃，用css样式代替）
2. td/th
   属性colspan：用来设置列跨度
   属性width：调整该列的宽度
3. tr（设置width属性无效）
   属性rowspan：用来设置行跨度
   属性align：设置表格中内容的位置
   属性bgcolor：设置行的背景色
   属性height：设置该行的高度

<table border="1" align="center">
  <tr align="center">
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>成绩</th>
  </tr>
  <tr align="center">
      <td>张三</td>
      <td>男</td>
      <td>17</td>
      <td>517</td>
  </tr>
  <tr align="center">
      <td>李四</td>
      <td>男</td>
      <td>18</td>
      <td>607</td>
  </tr>
</table>

4. thead标签定义表头
5. tbody标签定义表核心内容
6. tfoot标签定义表脚，通常是汇总行

转义字符：

转义字符	意义
&lt；	小于号
&gt；	大于号
&nbsp；	空格(不会被折叠)
&copy；	版权符号

问题：
1.HTML是什么，如何创建网页，如何浏览网页？
2.HTML的骨架是什么？什么是DTD？
DTD是文档类型声明
3.网页的字符集有什么区别？
4.常见的SEO配置项和应该遵守的规则有哪些？
SEO即为搜索引擎优化，书写好网页的title和两个meta标签，合理使用h标签，h1只能用一次。
5.HTTP是什么？
超文本传输协议，发送请求，接收请求