HTML
概念
- 分类:围堵标签,自闭和标签
- 内部是可以定义属性的,属性由键值对组成,值需要用双引号引起来,多个属性用空格隔开
- 不区分大小写
HTML文档的基本结构
- 也叫web页面;
- head,头元素:
作用:1、用于指定HTML文章中的一些元数据,例如元数据 meta:定义页面的编码格式,title:定义页面的标题。2、引入外部的资源文件–未来讲解 - body,主体:浏览器显示的内容都将在这里编写。
格式化代码的快捷键:ctrl+shift+f
(英文状态下使用)
常用标签
-
文本标签:
标题标签 h1–h6:字体逐渐缩小
段落标签p
换行标签
水平线标签
范围标签:突出部分内容被强调的部分
-
图片标签:
<img src="相对路径" title="" width="" height=""/>
-
列表标签
一般用在导航上
分类:无序列表,有序列表
-
定义描述标签
一般用在图文混编的场景中
<dl> <dt>盛放图片或标题</dt>(只能有一个) <dd>补充对dt的描述或说明</dd>(可以有多个) </dl>
-
布局标签 层 div
做容器,盛放其他标签的,将其他标签组合在一起用来布局。
标签分类
-
块状元素:一般都是新起一行,可以容纳行内元素和其他块级元素;
- 标题标签 h1-h6,
- 段落标签 p ,
- 水平线标签 hr,
- 有序列表标签 ol–li,
- 无序列表标签 ul–li,
- 定义描述标签 dl-dt-dd,
- 容器标签 div:
-
行级元素:一般都是语义级别的基本元素,一般只能容纳文本或者其他行内元素。(不会重起一行)
- 范围标签:span
- 图像标签:img
(PS:区分的简单方法:是否独占一行。块级元素可以设置宽高;行内元素设置宽高无效)
超链接
-
页面间的跳转
<a href="***.html" target="打开资源的位置">点击我试试</a> //target:默认值:"_self"(当前页面打开);"_blank"(在新页面打开)
-
锚链接
当一个页面长度超过一屏的时候,想迅速跳转到指定位置
步骤1:定义锚点 <a name="sport">运动户外</a> 步骤2:引用刚刚的锚点 <a href="#sport" target="_self">锚链接--点击可以跳转到运动户外</a>(本页面) <a href="***.html#sport" target="_self">锚链接--点击可以跳转到运动户外</a>(其他页面)
表格
-
规则表格
<table> <tr>定义行,有几行就有几个tr <th></th> 定义标题那一行的单元格 </tr> <tr>定义行,有几行就有几个tr <td></td><td></td> 定义列,除了标题内容的单元格 </tr> </table>
-
不规则表格–跨行和跨列
<table> <tr> <td colspan="3"></td> 跨列,包含自己在内的列数,rowspan跨行 </tr> <table>
-
高级标签
- 标题标签
<caption></caption>
- 逻辑分区标签
<thead></thead> <tbody></tbody> <tfoot></tfoot> 方便整体控制
表单
-
用于采集用户输入的数据。用于和服务器进行交互。
-
-
表单项元素中的一些属性:
id:元素的唯一表示,不重复 name:表单项元素的名称,很重要--提交数据到服务器之后,服务器获取数据通过该名称 value:表单项元素的值,服务器获取数据通过name获取到的就是value type:表示表单项元素的呈现形式 class:表示样式名称 readonly:表示只读,用户只能看不能改 disabled:表示禁用,该元素不能改而且背景是灰色
-
文本框: <form type="text" id="" name=""></form> 密码: <form type="password" id="" name=""></form> 生日: <form type="datetime_local" id="" name=""></form> 单选按钮: type="radio" name相同才表示一组 value checked(默认) 复选框: type="checkbox" name相同才表示一组 文件域: type="file" name multiple="multiple"(表示多个文件上传) 隐藏域: type="hidden" 下拉列表框: <select name=""> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> 文本域: <textarea rows="15" cols="10" readonly="readonly" > ******** </textarea>
按钮:
框架
- 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
常用的布局组合标签
- div-ul-li/div-ol-li:常用于导航布局
- div-dl-dt-dd:常用于图文混编布局
- div-form:常用于表单布局
- div-table:常用于局部规则数据展示布局
HTML4与HTML5的区别
- HTML4是为了适应pc时代产生的,HTML5是为了适应移动互联网时代
转义符号
转移符号 描述
转义为空格
<
转义为小于号<
≤
转义为小于等于号≤
>
转义为大于号>
≥
转义为大于等于号≥
单布局
- div-table:常用于局部规则数据展示布局
HTML4与HTML5的区别
- HTML4是为了适应pc时代产生的,HTML5是为了适应移动互联网时代
转义符号
转移符号 描述
转义为空格
<
转义为小于号<
≤
转义为小于等于号≤
>
转义为大于号>
≥
转义为大于等于号≥
©
转义为版权符号 ©