HTML 复习

发表于由

HTML

超文本标记语言

HTML的作用

写网页结构内容

文件后缀

.html  或者  .htm

DOCTYPE的作用

文档类型声明
告诉浏览器按当前标准解析代码


标签 标记

HTML由标签组成
标签是包含在尖括号内的关键词
双标记  封闭类型标记   div,p,span,a,b,i,u,s,del,sup,sub,em,strong,ul,ol,li,dl,dt,dd,hn,form.button,textarea,table,tr,td,header,nav,footer,aside,section,article,video,audio...
单标记  非封闭类型标记  空标记  br,hr,img,input,meta,link...

元素

块级元素和行内元素的区别：
1）块级元素独占一行，行内元素在同一行显示
2）块级元素默认宽度100%，行内元素默认宽度由内容撑开
3）块级元素可以设置宽高，行内元素设置宽高不生效
4）块级元素可以设置margin和padding的四周，行内元素只能设置margin和padding的左右
5）块级元素默认display:block;  行内元素默认display:inline;
6）布局时，块级元素可以包含块级元素和行内元素，行内元素一般不要包含块级元素
7）常见的块级元素
div,h1-h6,p,hr,ul,ol,li,dl,dt,dd,table,tr,tr,form,header,nav,footer,aside,article,section...
8）常见的行内元素
span,a,img,b,i,u,s,del,em,strong,sup,sub,input,button,textarea,select,video,audio....

图片

<img src="路径" alt="图片不能正常显示给予提示" title="鼠标悬停给予提示"/>
路径：
1）绝对路径
2）相对路径
①平级 直接写
②下一级   /
③上一级  ../

超链接

<a href="路径" target="设置打开的窗口_self|_blank" name="锚点"></a>

列表

1）无序列表
<ul>
    <li></li>
    <li></li> 
   <li></li>
</ul>

2）有序列表
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

3）自定义列表
<dl>
    <dt></dt>
    <dd></dd>
</dl>

表格

<table>
    <caption>标题</caption>
    <thead>
        <tr>
            <th colspan="水平合并" rowspan="垂直合并"></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

表单

1）作用
提交数据到服务器，使页面具有交互性

2）标签
<form action="提交的地址" name="表单名称" method="提交的方式get|post"></form>
get和post的区别：
①get提交数据不安全，还在地址栏中显示，post安全
②get只能提交少量数据，post理论上没有限制

3）表单元素
<input type="text">
<input type="password">
<input type="radio" name="">
<input type="checkbox">
<input type="submit">
<input type="reset">
<input type="button">
<button>提交</button>
<button type="reset">重置</button>
<button type="button">没有任何功能的按钮</button>
<input type="file"> 把form的编码格式改为二进制
<input type="hidden">
<input type="image" src="">
<select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>
<label for="">和input的id属性绑定</label>

4）表单元素的属性
value  当前值
name   表单元素的名称
checked  默认被选中 配合单选按钮和多选按钮使用
selected  默认显示  配合option使用
readonly  只读
disabled  禁用

5）H5新增则type类型
<input type="email" />
<input type="url"/>
<input type="search"/>
<input type="number"/>
<input type="range"/>
<input type="color"/>
<input type="tel"/>
<input type="date"/>
<input type="week"/>
<input type="month"/>

6）H5新增属性
placeholder=""   默认提示
required 必填项
autofocus   自动获取焦点
multiple    可以输入多个，用逗号隔开，配合邮箱和网址使用
min和max    最小值和最大值，配合数字和范围使用
minlength和maxlength  最小长度和最大长度
step  步长，配合数字和范围使用，默认为1

H5新增语义化布局标签

<header>头部</header>
<nav>导航</nav>
<footer>页脚</footer>
<aside>侧边栏</aside>
<article>文章、帖子、博客等</article>
<section>独立的一块</section>

视频和音频

1）视频
<video src="路径" autoplay loop controls muted poster=""></video>
2）音频
<audio src="路径" autoplay loop controls muted></audio>
3）资源
<source src=""/>

<video autoplay loop>
    <source src=""/>
    <source src=""/>
    <source src=""/>
</video>

HTML四大通用属性


除了br没有，其他标签都有的属性
1）title  鼠标悬停给予提示
2）style  行内样式
3）class  类选择器
4）id     id选择器

语义化标签


看到标签知道其表示的含义
使用时正确的标签干正确的事情
优点：
1）有利于SEO
2）有利于屏幕阅读器去读取
3）结构清晰，有利于团队开发与维护

发表评论