基础认知
常见的五大浏览器：
-
IE浏览器
-
火狐浏览器（Firefox）
-
谷歌浏览器（Chrome）
-
Safari浏览器
-
欧朋浏览器（Opera）
HTML页面固定结构
-
每一页文章内容是有固定的结构的，如：开头、正文、落款等……
-
网页中也是存在固定的结构的，如：整体、头部、标题、主体
-
网页中的固定结构是要通过特点的 HTML标签 进行描述的
HTML骨架结构标签
-
html标签：网页的整体
-
head标签：网页的头部
-
body标签：网页的身体
-
title标签：网页的标题
-
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
HTML标签的结构
- 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
- 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
HTML标签与标签之间的关系
-
父子关系（嵌套关系）
<head> <title></title> </head> -
兄弟关系（并列关系）
<head></head> <body></body>
HTML常用标签
-
段落标签
特点：
段落之间存在间隙
独占一行
<P>
我是段落标签
</P>
-
换行标签
特点：
单标签
让文字强制换行
<br>
-
水平线标签
特点：
单标签
在页面中显示一条水平线
<hr> -
图片标签
特点：
单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置
<img src=" " alt=" ">属性名：src
属性值：目标图片的路径
属性名：alt
属性值：替换文本
当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本
-
链接标签
特点：
双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
```html
<a href="./目标网页.html">超链接</a>
```
属性名：href
属性值：点击之后跳转去哪一个网页（目标网页的路径）
-
无序列表
标签名 说明 ul 表示无序列表的整体，用于包裹li标签 li 表示无序列表的每一项，用于包含每一行 -
有序列表
标签名 说明 ol 表示有序列表的整体，用于包裹li标签 li 表示有序列表的每一项，用于包含每一行 -
自定义列表
标签名 说明 dl 表示有序列表的整体，用于包裹dt/dd标签 dt 表示自定义列表的主题 dd 表示自定义列表对主题的没一项内容 -
表格标签
标签名 说明 table 表格整体，可用于包裹多个tr tr 表格每行，可用于包裹td td 表格单元格，可用于包裹内容 -
input标签
标签名 type属性值 说明 input text 文本框，用于输入单行文本 input password 密码框，用于输入密码 input radio 单选框，用于多选一 input checkbox 多选框，用于多选多 input file 文件选择，用于之后上传文件 input submit 提交按钮，用于提交 input reset 重置按钮，用于重置 input button 普通按钮，默认无功能 -
下拉菜单标签 标签组成： select标签：下拉菜单的整体 option标签：下拉菜单的每一项
-
文本域标签
<textarea>文本内容</textarea>常见属性：
cols:规定了文本域内可见宽度
rows：规定了文本域内可见行数
-
lable标签 把表单内容包裹起来，作为表头
-
无语义化标签 div、span
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
<div> <span></span> </div>
扫一扫
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
