一.HTML基础知识点
(一)基础标签
1.<h></h>系列标签表示给某段文字添加标题
的,从1~6,没有h7标签,程度大小语音逐渐递减
2.<p></p>给文本添加段落语义
3.hr标签表示给文本添加一条水平分割线
4.img标签:img标签其实就是英文image的缩写,它的作用就是告诉浏览器我们需要显示一张图片.语法:<img src="图片的地址" alt="当图片不显示是提示的文字" title="鼠标悬停时候显示的内容">
5.br标签表示换行
6.a标签:就是用来控制页面和页面之间的跳转
语法:<a href="需要跳转的地址" target="打开的方式" title="当鼠标悬停时提示的信息">
注意点:当href的属性取值为ID选择器的时候,我们可以用来作为锚链接
当href的属性值为#和javascript时候表示空链接.在<head>标签中设置<base>标签可以控制<a>标签的打开方式,如果两者的设置target属性,则以a标签为准.
(二)列表标签
1.无序列表
<ul>
<li>音乐</li>
<li>音乐</li>
<li>音乐</li>
</ul>
作用:给一堆数据添加列表语义,并且这一堆数据中所有的数据都没有先后之分
注意点:(1)ul标签是用来给一堆数据添加列表语义的,而不是用来给他们添加小圆点的
(2)ul标签和li标签是一个整体,是一个组合,所以是成对出现,不会单个出现
(3)ul标签中不推荐使用其它标签,但是真实项目中,我们一般嵌套其它标签使用
2.有序列表
<ol>
<li>音乐</li>
<li>音乐</li>
<li>音乐</li>
</ol>
作用:给一堆数据添加列表语义,并且这一堆数据中所有的数据都有先后之分
注意点:和ul标签的注意点差不多
3.自定义列表
<dl>
<dt>炒菜</dt>
<dd>回锅肉</dd>
<dd>大盘鸡</dd>
<dt>炒饭</dt>
<dd>蛋炒饭</dd>
<dd>怪噜饭</dd>
</dl>
注意点:1.和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现
2.和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签
3.一个dt可以没有对应的dd,也可以有多个对应的dd, .推荐使用一个dt对应一个dd
4.和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签
定义列表的应用场景
1.做网站尾部的相关信息
2.做图文混排
(三)表格标签
表格标签代表了一个时代,当初基本的静态页面结构都是用它来构建的.它的作用是用来给一堆数据添加表格语义;是数据的一种展现形式,当数据量特别大的时候,表格显示出来就比较的清晰.<table></table>
表格标签的格式:
<table border="1">
<caption>//代表表格标题
<h2>今日小说排行榜</h2>
</caption>
<tr>//代表行数:第一行
<td>需要展示的数据1</td>
<td>需要展示的数据2</td>
</tr>
<tr>//第二行
<td>需要展示的数据1</td>
<td>需要展示的数据2</td>
</tr>
</table>
第二种表格:针对复杂数据
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>数据</td>
</tr>
</tfoot>
</table>
注意点:1.border表格边框属性:这个属性决定了边框的宽度.默认情况下属性值是0,看不到边框
2.宽度和高度属性(可以给table和td设置)
2.1给table设置,表示整个表格的实际宽度和高度
2.2.给td设置宽高,会修改当前单元格的宽度和高度,但是不会影响整个表格对的宽高
3.水平对齐(align)和垂直对齐(valign)属性
3.1:水平对齐可以给table.tr.td标签使用,垂直对齐只能给tr和td标签使用
3.2:给table标签设置align属性,可以控制表格在水平方向的对齐方式
3.3:给tr标签设置align属性,可以设置当前行中所有的单元格内容的水平方向的对齐方式.
3.4给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直对齐方式
3.5给td标签设置valign属性, 控制当前单元格内容垂直方向的对齐方式
4.外边距和内边距的属性,只能给table标签使用
4.1.外边距就是单元格和单元格之间的距离, 默认距离是2px
4.2 内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距默认情况下内边距是1
细线表格的制作方式:
1.给table标签设置bgcolor
2.给tr标签设置bgcolor
3.给table标签设置cellspacing = "1px"
注意点:
table标签和tr标签以及td标签都支持bgcolor属性
但是以上内容仅仅作为了解, 因为样式以后都是通过css来控制
合并单元格:
colspan:水平方向上的单元格合并
rowspan:垂直方向上的单元格合并
(四)表单标签
表单标签专门用来收集用户信息的
表单中的元素一定要写在表单中
表单的语法格式:
<form action="http://www.baidu.com">//action:代表表单要提交的地址
............................
</form>
1.明文输入框
<form action=" ">
<input type="text" value=" " name="account">
</form>
2.暗文输入框
<form action=" ">
<input type="password" value=" " name="psw">
</form>
3.单选框
<form action=" ">
<input type="radio" name="sex" value="男">
<input type="radio" name="sex" value="女">
</form>
注意点:如果name的属性值不同,将不会互斥
4.复选框
<form action=" ">
<input type="checkbox" name="sport">足球
<input type="checkbox" name="sport" checked>篮球 //checked默认选中篮球
</form>
5.其它类型
<form action=" ">
<input type="button" value="我是按钮">
<input type="image" src="图片地址">
<input type="reset" value="清空">
<input type="submit">
<input type="hidden" name="cc" value="提交内容">
邮箱:<input type="email">
域名:<input type="url">
电话:<input type="number">
时间:<input type="date">
颜色: <input type="color"> //H5新增的表单提供自动验证
<textarea cols="30" rows="10" name="desc"></textarea>
<select>
<optgroup label="北京">
<option>朝阳区</option>
<option>昌平区</option>
<option>通州区</option>
</optgroup>
<optgroup label="广州">
<option>天河区</option>
<option>越秀区</option>
<option>黄浦区</option>
</optgroup>
</select>
</form>
(五)多媒体标签
video audio标签的属性
src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是需 要循环播放
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:静音
video标签的书写形式:
<video src="images/sb1.webm" autoplay="autoplay" controls="controls"></video>
第二种方式:
<video autoplay="autoplay" controls="controls">
<source src="images/sb1.webm" type="video/webm"></source>
<source src="images/sb1.mp4" type="video/mp4"></source>
<source src="images/sb1.ogg" type="video/ogg"></source>
</video>
audio标签
<audio src="images/yinyue.mp3" autoplay="autoplay" controls="controls"></audio>
audio的第二种书写:
<audio autoplay="autoplay" controls="controls">
<source src="images/yinyue.mp3" type="audio/mp3">
</audio>
marquee标签:俗称跑马灯.支持各大浏览器
格式:
<marquee>内容</marquee>
属性:
direction: 设置滚动方向 left/right/up/down
scrollamount: 设置滚动速度, 值越大就越快
loop: 设置滚动次数, 默认是-1, 也就是无限滚动
behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
<marquee direction="down" scrollamount="100" loop="1" behavior="alternate">跑吧</marquee>
布局元素
<div></div>盒子
<header></header>头部
<main></main>主体
<footer></footer>页脚
<nav></nav>导航
<aside</aside>侧边栏
小编此篇文章属于新手上路,不喜勿喷,遗漏的知识点本人觉得用得较少,所以没有列举,望各位大佬多多指点,小编及时加以改正,
