HTML入门学习
HTML语法与基础标签
互联网基本原理
1.在本地进行开发,然后上传到服务器进行共享。
2.输入网址即是进行一个HTTP请求,然后服务器识别发出来HTTP请求。服务器识别出后将网页发送给用户,这一过程是HTTP响应。
HTTP协议 超文本传输协议
一、head标签对
- head标签对是网页的配置,并不是网页的头部。
- body标签对中书写网页的内容,包括网页的头部、主要内容、页脚等各个部分。
- charset属性规定使用哪种字符编码。我们常用的字符集有两种,分别是UTF-8和gb2312。
- UTF-8:适用于制作有非汉字文字的网页。
- gb2312:制作只有汉语和英语的网页,由于1个汉字仅占2字节,网页文件尺寸明显减少。
注: 在vscode中编码时,要设置vscode编辑器的字符集和网页字符集一致,否则会出现乱码。
- 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 | 日期、时间选择控件 |
电子邮件输入控件 | |
file | 文件选择控件 |
number | 数字输入控件 |
range | 拖拽条 |
search | 搜索条 |
url | 网址输入控件 |
(当type为text时,可以结合datalist控件,可以为输入框提供一些备选项,当用户输入的内容与备选文字相同时,将会显示智能感应。)
5.表格标签
标签 | 含义 |
---|---|
table | 表格标签 |
tr | 行 |
td | 列 |
th | 标题小格(表头) |
6.细化
01无序列表和有序列表
- ul和ol标签里只能放li列表项,而li里可以有其他的标签内容
- 有序列表ol的一些属性:
1)type属性(HTML5中已废弃),值:a(表示小写英文字母的编号),A(表示大写英文字母的编号),i(表示小写罗马数字的编号),I(表示大写罗马数字的编号),1(表示数字编号 默认的)
2) reversed属性 指定列表中的条目是否是倒序排列的
3)start属性 值必须是一个整数,指定了列表编号的起始值。此属性的值应为阿拉伯数字。
02媒体和语义化标签
img标签的属性
- src属性
src属性是指图片的路径。
相对路径:
描述从网页出发,如何找到图片。我们src下所使用的存放在项目文件夹下的就是相对路径。
如果需要回退层级,则需要“…/”这样的写法。与当前文件同级时也可以书写“./”
绝对路径:
描述图片的精准地址,比如图片的网址 - alt属性
·alt属性对图像的文本描述,非必写属性
·如果由于某种原因网页无法加载图像,则在网页上就会显示alt的值,对图像的描述
·供视力不方便的朋友使用网页朗读器,也会朗读alt中的文本 - width和height属性
单位是像素,但是书写的时候不需要写单位px
超链接a标签
- href属性
href其值为链接的地址,支持相对路径和绝对路径 - title属性
设置鼠标悬停到链接上的文本 - target属性
此属性用来设置要跳转到的网页在哪个窗口打开。默认在当前页面打开新网页。值为blank时代表在新标签页中打开网页。 - 页面内锚点
可以理解为在页面内定位,可以在较长的页面上使用。在h系列标签上添加一个id属性成为锚点,然后在链接上拼接上 #id ,就可以直接跳转定位到页面内此标签内容的位置上,其他页面跳转到此页面时,也可以链接到指定锚点。
注:<a href="#top"></a>
直接跳转到页面顶部
<h id="wuxi"></h>
<a href="lvyou.html#wuxi">无锡旅游攻略</a>
- 下载链接
指向exe、zip、rar等文件格式的链接,将会自动成为下载链接。 - 邮件链接和电话链接
有mailto:前缀的链接是邮件链接,系统将自动打开Email相关的软件。
<a href="mailto:123456789@qq.com">给123456789发送邮件</a>
有tel:前缀的链接是电话链接,系统将自动打开拨号盘。
<a href="tel:123456789">给123456789打电话</a>
音频标签audio
<audio controls src="音频地址">抱歉,您的浏览器不支持audio标签,请升级浏览器。</audio>
- controls 显示播放控件,src是音频的地址,audio标签中的文字在浏览器不支持audio时显示,支持的时候不显示。
- autoplay属性 音频会自动播放
- loop属性 将循环播放音频
video于此相同
03表单标签
form为表单标签。
属性action
属性name
表单控件以及属性
- 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表格标签以及属性
- table表格标签
属性border:表格的边框(默认是双线表格)
属性caption:表格的标题,通常作为table的第一个子元素出现(默认和表格一样宽)
属性width:表格的宽度
属性height:表格的高度
属性align:调整table整体的位置(left、center、right)
属性cellspacing:是指单元格间距,是设置单元格与单元格之间的距离(可以用来设置单线的边框,值设为0)
属性cellpadding:设置单元格高度;cellspacing属性值越大,单元格和单元格之间的间距也就越大(已废弃,用css样式代替) - td/th
属性colspan:用来设置列跨度
属性width:调整该列的宽度 - 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>
- thead标签定义表头
- tbody标签定义表核心内容
- tfoot标签定义表脚,通常是汇总行
转义字符:
转义字符 | 意义 |
---|---|
<; | 小于号 |
>; | 大于号 |
 ; | 空格(不会被折叠) |
©; | 版权符号 |
问题:
1.HTML是什么,如何创建网页,如何浏览网页?
2.HTML的骨架是什么?什么是DTD?
DTD是文档类型声明
3.网页的字符集有什么区别?
4.常见的SEO配置项和应该遵守的规则有哪些?
SEO即为搜索引擎优化,书写好网页的title和两个meta标签,合理使用h标签,h1只能用一次。
5.HTTP是什么?
超文本传输协议,发送请求,接收请求