HTML复习总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/boonyaxnn/article/details/88919825

1.HTML介绍
超文本标记语言
作用：写网页内容结构
文件后缀: .html  或者  .htm
语法：不区分大小写，建议小写
HTML由浏览器由上往下，由左往右解析

2.标签、标记
HTML由标签组成
标签：写在<>里面的内容

双标记   封闭类型标记
span,div,p,hn,a,b,i,u,em,strong,del,sup,sub,s,ol,ul,li,dl,dt,dd,table,tr,td,th,form,button,header,nav,footer,aside,section,article,video,audio.....

单标记   非封闭类型标记    空标记
br,hr,img,input,link,meta,source...

3.元素
由开始标签到结束标签被称为元素
例如：<div>          盒子             </div>
     开始标签                        结束标签
     元素的开始     元素的内容       元素的结束

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

5.HTML属性
语法：属性="属性值"
双标记写在开始标签里面，用空格隔开
单标记写在/前面，用空格隔开
一个标签可以有多个属性，用空格隔开，不区分前后顺序

6.文本格式化标签
双标记、行内元素
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<del>删除线</del>
<s>删除线</s>
<em>强调</em>
<strong>强调</strong>
<sup>上标</sup>
<sub>下标</sub>

7.列表
1）无序列表
<ul type="desc|circle|square|none">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
2）有序列表
<ol type="1|A|a|I|i" start="number" reversed>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ol>
3）自定义列表
一般用于主体和描述的组合
<dl>
    <dt>主体</dt>
    <dd>描述</dd>
    <dd>描述</dd>
    <dd>描述</dd>
    <dt>主体</dt>
    <dd>描述</dd>
    <dd>描述</dd>
    <dd>描述</dd>
</dl>

8.表格
作用：存储数据，向用户展示数据

<table border="1" width="" height="" align="" cellpadding="内容距边框的距离" cellspacing="单元格之间的距离"
        bgcolor="" background="" bordercolor="">
    <caption>标题</caption>
    <thead>
        <tr height="" align="" valign="">
            <th width="" height="" align="" valign="" 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>


9.表单
作用：提交数据，使页面具有交互性
一个页面可以有多个form，但是form之间不能相互嵌套

<form action="提交的地址" name="表单名称" method="提交的方式get|post" enctype="multipart/form-data">
    <input type="text"/>
    <input type="password"/>
    <input type="radio" name=""/>
    <input type="checkbox"/>
    <input type="file"/>
    <input type="hidden"/>
    <input type="submit"/>
    <input type="reset"/>
    <input type="button" value="没有任何功能的按钮"/>
    <button>提交</button>
    <button type="reset">重置</button>
    <button type="button">没有任何功能的按钮</button>
    <input type="image" src=""/>
    <select name="" id="">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </select>
    <select name="" id="">
        <optgroup label="组名">
            <option value=""></option>
            <option value=""></option>
        </optgroup>
        <optgroup label="组名">
            <option value=""></option>
            <option value=""></option>
        </optgroup>
    </select>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <fieldset>
        <legend>元素集标题</legend>
    </fieldset>
    <label for="">提高用户体验度</label>

    <!--HTML5新增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"/>
</form>

get和post的区别：
1）get提交不安全，信息会在地址栏中显示；post安全
2）get提交数据大小有限制（最大为2kb），post理论上没有限制

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


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

10、图片
<img src="" alt="当图片不能正常显示给予提示" title="鼠标悬停给予提示"/>

11、超链接
<a href="" target="_self|_blank"></a>

空连接：
href="#"  返回页面顶部

锚点：
1）点击a跳转到a
<a href="#名字">点击</a>
<a href="" name="名字">到我</a>

2）点击a跳转到块级元素
<a href="#名字">点击</a>
<div id="名字">到我</div>


12.HTML5新增元素
1）布局标签
<header>头部</header>
<nav>导航</nav>
<footer>页脚</footer>
<aside>侧边栏</aside>
<article>文章、帖子、博客</article>
<section>章节</section>

2）媒体
1、视频
<video src="" autoplay loop controls muted poster="" width="" height="">您的浏览器不支持视频</video>

2、音频
<audio src="" autoplay loop controls muted>您的浏览器不支持音频</audio>

3、资源
<source src=""/>
提供多种格式供浏览器选择

<video>
    <source src="1.mp4"/>
    <source src="1.ogg"/>
    <source src="1.webM"/>
    您的浏览器不支持视频
</video>

4、引入视频、音频、插件等
<embed src=""/>


3）
1、元素和元素的组合
<dl>
    <dt>主体</dt>
    <dd>描述</dd>
</dl>

<figure>
    <p>描述</p>
    <figcaption>主题</figcaption>
</figure>

2、细节
<details>
    <summary>标题</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eligendi pariatur sunt suscipit voluptate! Animi autem cum esse fuga harum illo illum incidunt iste, iusto libero provident reiciendis tempora tempore.</p>
</details>

3、突出显示
<mark>突出显示</mark>

4、刻度
<meter value="" min="" max="" low="" high="">您的浏览器不支持刻度</meter>

5、进度条
<progress max="" value="">您的浏览器不支持进度条</progress>

6、给input提供选项
<input type="text" list="city"/>
<datalist id="city">
    <option value="北京"></option>
    <option value="北京"></option>
    <option value="北京"></option>
    <option value="北京"></option>
</datalist>

7、画布
<canvas>你的浏览器不支持画布</canvas>


        13、doctype的作用
        文档类型声明
        作用：告诉浏览器按当前标准解析代码
        HTML5  不区分大小写，建议小写；双标签的结束标签可以省略

xhtml  严格的HTML，区分大小写；双标签的结束标签不可以省略

三种类型：过渡版本    严格版本   框架版本