HTML基础总结

2019-03-09 本文已影响0人不求而得的小确幸

都是自己学习时候总结的，如有错误以及需要改进的地方，请大家尽管指出，共同进步，谢谢。

HTML(Hyper text markup language)：超文本标记语言。

一、HTML文档结构：

<!------ HTML文档结构 ------>
<!-- 声明文档类型 -->
<!doctype html>
<!-- 根标签 -->
<html>
<!-- 头标签 -->
<head>
    <!-- 标题标签 -->
    <title></title>
</head>
<!-- 主体标签 -->
<body>
</body>
</html>

二、HTML普通标签

1、段落标签

<!-- 段落标签 -->
<p>文本内容</p>

特点：上下自动生成空白行。换行(br标签)不会生成空白行。

2、文字标签

<!-- 文字标签 -->
<font>文本内容</font>

文本格式化标签：

文本加粗标签

    <!-- 文本加粗标签 -->
    <!-- 工作中尽量用strong -->
    <strong>加粗内容</strong>
    <b>加粗内容</b>

文本倾斜标签

    <!-- 文本倾斜标签 -->
    <!-- 工作中尽量用em -->
    <em>倾斜内容</em>
    <i>倾斜内容</i>

删除线标签

    <!-- 删除线标签 -->
    <!-- 工作中尽量用del -->
    <del>删除线内容</del>
    <s>删除线内容</s>

下划线标签

    <!-- 下划线标签 -->
    <!-- 工作中尽量用ins -->
    <ins>下划线内容</ins>
    <u>下划线内容</u>

标题标签

h1~h6，<h1>定义最大的标题，<h6> 定义最小的标题；
h1 在一个页面里只能出现一次；

    <!-- 标题标签 -->
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

3、图片标签

<!-- 图片标签 -->
<img src="图片的来源"  alt="替换文本" title="提示文本" width="图片宽度" height=
"图片高度"/>

src：图片的来源，必写属性；
alt：替换文本，图片不显示的时候显示的文字；
title：提示文本，鼠标放到图片上显示的文字；
width：图片宽度；
height：图片高度；

4、超链接标签

超链接

 <!-- 超链接标签 -->
<a href="去往的路径" title="提示文本" target="跳转方式"/>

href：去往的路径(跳转的页面)必写属性；
title：提示文本，鼠标放到链接上显示的文字；
target=”_self”：默认值，在自身页面打开(关闭自身页面，打开链接页面)
target=”_blank”：打开新页面(自身页面不关闭，打开一个新的链接页面)

锚链接

1、先定义一个锚点：<p id="sd">
2、超链接到锚点：<a href="#sd">回到顶部</a>

空链

<a href=”#”>

链接优化写法，让所有超链接都在新窗口打开：

<base target=”_blank”>

特殊字符

<!-- 空格 -->
&nbsp; 
<!--  <(小于) -->
&lt;  
<!--  >(大于) -->
&gt;   
<!--  版权 -->
&copy;
<!--  人民币符号 -->
&yen;

5、列表标签

无序列表

    <!-- 无序列表 -->
    <ul type=”circle”>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

type=”square”：小方块；
type=”disc”：实心小圆圈；
type=”circle”：空心小圆圈；

有序列表

    <!-- 有序列表 -->
    <ol type=”1">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>

type=”1,a,A,i,I”，
start=”3” 决定了开始的位置。

自定义列表

    <!-- 自定义列表 -->
    <dl>
        <dt>小标题</dt>
        <dd>解释标题1</dd>
        <dd>解释标题2</dd>
    </dl>

6、表格标签

表格标签：展示数据，是对网页重构的一个有益补充。

快速创建表格：table>tr*3>td*3

<!-- 表格标签 -->
<!-- 表格 -->
<table border="1" width="300" height="300" cellspacing="0" cellpadding="10" align=
"center" bgcolor="green">
<!-- 行 -->
    <tr>
        <!-- 列 -->
        <td align="center">张三</td>
        <td>18</td>
        <td>经理</td>
    </tr>
</table>

属性：
border=”1”：边框；
width=”500”：宽度；
height=”300”：高；
cellspacing=”2”：单元格与单元格的距离；
cellpadding=”2”：内容距边框的距离；
align=”left | right | center” ；
如果直接给表格用align=”center”：表格居中；
如果给tr或者td使用，tr或者td的内容居中；
bgcolor=”red”：表格的背景颜色

表格的标准结构(了解就行，对seo更友好)

<!-- 表格的标准结构 -->
    <table>
        <thead>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>

表头和单元格合并

<!-- 表头和单元格合并 -->
<table border="1" width="300" height="300" align="center">
    <!-- 表头 -->
    <caption>表头信息</caption>
    <tr>
        <!-- 合并同一行上的单元格 -->
        <td colspan="2">米奇 6</td>
        <!-- <td>6</td> -->
        <!-- 合并同一列上的单元格 -->
        <td rowspan="3">前端</td>
    </tr>
    <tr>
        <td>米奇</td>
        <td>6</td>
        <!-- <td>前端</td> -->
    </tr>
    <tr>
        <td>米奇</td>
        <td>6</td>
        <!-- <td>前端</td> -->
    </tr>
</table>

colspan=”2”：合并同一行上的单元格
rowspan=”2”：合并同一列上的单元格

表格标题、边框颜色、内容垂直对齐

<!-- 边框颜色 -->
<table border="2" bgcolor="red" width="300" height="300" align="center" cellspacing="0">
    <tr>
        <!-- 标题：使内容加粗居中 -->
        <th>米奇</th>
        <th>6</th>
        <th>前端</th>
    </tr>
    <tr>
        <!-- 内容垂直对齐方式 -->
        <td valign="top">米奇</td>
        <td>6</td>
        <td>前端</td>
    </tr>
    <tr>
        <td>米奇</td>
        <td>6</td>
        <td>前端</td>
    </tr>
</table>

表格标题 <th></th>用法和td一样：使标题的文字自动加粗水平居中对齐；
边框颜色：bordercolor="red"；
内容垂直对齐方式：
valign=”top | middle | bottom”

练习

细线表格

<!-- 细线表格 -->
<table width="300" height="300" bgcolor="green" cellspacing="1">
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

细线课程表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>细线课程表</title>
</head>
<body>
    <table width="500" height="300" bgcolor="green" cellspacing="1" align="center">
        <caption>课程表</caption>
        <tr bgcolor="white">
            <th colspan="2"></td>
            <!-- <td></td> -->
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr bgcolor="white">
            <td rowspan="2">上午</td>
            <td>1</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
            <td>化学</td>
            <td>生物</td>
        </tr>
        <tr bgcolor="white">
            <!-- <td></td> -->
            <td>2</td>
            <td>体育</td>
            <td>音乐</td>
            <td>几何</td>
            <td>画画</td>
            <td>舞蹈</td>
        </tr>
        <tr bgcolor="white">
            <td rowspan="2">下午</td>
            <td>1</td>
            <td>体育</td>
            <td>画画</td>
            <td>音乐</td>
            <td>语文</td>
            <td>音乐</td>
        </tr>
        <tr bgcolor="white">
            <!-- <td></td> -->
            <td>2</td>
            <td>英语</td>
            <td>舞蹈</td>
            <td>体育</td>
            <td>唱歌</td>
            <td>体育</td>
        </tr>
    </table>
</body>
</html>

三、HTML表单标签

表单的作用是收集信息

表单域

<!-- 表单域 -->
<form action="1.php" method="get">

属性：
action：处理信息；
method="get | post"
get通过地址栏传输信息，安全性差；
post 通过1.php来处理信息，安全性高

文本输入框

<!-- 文本输入框 -->
用户名：<input type="text" name="username" value="大前端" maxlength="6" readonly="readonly" disabled="disabled">

name="username"：输入框的名称；
value="大前端"：默认值，将输入框的内容传给处理文件
maxlength="6" ：限制输入字符长度；
readonly="readonly"：将输入框设置为只读模式(不能编辑)
disabled="disabled"：输入框为未激活状态；

密码输入框

<!-- 密码输入框 -->
密码：<input type="password" name="pwd">

文本输入框的所有属性对密码输入框都有效

单选框

 <!-- 单选框 -->
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女

只有将name的值设置成相同的时候，才能实现单选效果；
checked=”checked”：设置默认选择项

下拉列表

<!-- 下拉列表 -->
省(市)：<select multiple="multiple">
                    <option>河北</option>
                    <option>山西</option>
                    <option>山东</option>
                    <option selected="selected">北京</option>
               </select>

属性：
multiple="multiple"：将下拉列表设置为多选项；
selected="selected"：设置默认选中项

下拉列表分组

<!-- 下拉列表分组 -->
市(区)：<select>
            <optgroup label="北京市">
            <option>昌平区</option>
            <option>海淀区</option>
            <option>朝阳区</option>
            <option>大兴区</option>
            </optgroup>
        </select>
        <select>
            <optgroup label="广州市">                  
            <option>昌平区</option>
            <option>海淀区</option>
            <option>朝阳区</option>
            <option>大兴区</option>
            </optgroup>
        </select>

<optgroup></optgroup>：对下拉列表进行分组；
label=""：分组的名称

多选框

<!-- 多选框 -->
<input type="checkbox" checked="checked">喝酒
<input type="checkbox" checked="checked">抽烟
<input type="checkbox" checked="checked">烫头

checked="checked"：设置默认选中项

多行文本框

<!-- 多行文本框 -->
<textarea cols="30" rows="10"></textarea>

cols：控制输入字符的长度；
rows：控制输入的长度

文件上传控件

<!-- 文件上传控件 -->
<input type="file">

文件提交按钮

<!-- 文件提交按钮 -->
<input type="submit">

可以实现提交信息功能

普通按钮

<!-- 普通按钮 -->
<input type="button" value="普通按钮">

不能提交信息，配合JS使用

图片按钮

<!-- 图片按钮 -->
<input type="image" src="按钮.jpg">

图片按钮，可以实现提交功能

<!-- 重置按钮 -->
<input type="reset">

将信息重置到默认状态

表单信息分组

<form action="1.php" method="get">
        <!-- 表单信息分组 -->
        <fieldset>
            <legend>分组信息</legend>
        </fieldset>
</form>

<fieldset></fieldset>：对表单信息进行分组；
<legend></legend>：表单信息分组名称

四、HTML5标签

常用新标签：

header：定义文档的页眉头部；

    <header>语义：定义文档的页眉 头部</header>

nav：定义导航栏；

    <nav>语义：定义导航栏</nav>

footer：定义文档或节的页脚底部；

    <footer>语义：定义文档或节的页脚底部</footer>

article：定义文章

       <article>语义：定义文章</article>

section：定义文档中的节(section、区段)

      <section>语义：定义区域</section>

aside：定义其所处内容之外的内容侧边

<aside>语义：定义其所处内容之外的内容 侧边</aside>

新增的type属性值：

datalist：标签定义选项列表。请与input元素配合使用该元素

       <!-- input里面用list -->
    <input type="text" value="输入明星名字" list="star">
    <!-- datalist里面用id来实现和input链接 -->
    <datalist id="star">
        <option>刘德华</option>
        <option>刘若英</option>
        <option>刘晓庆</option>
        <option>郭富城</option>
        <option>张学友</option>
    </datalist>

fieldset：可将表单内的相关元素分组、打包和legend搭配使用

    <fieldset>
        <!-- 标题 -->
        <legend>用户登录</legend>
        用户名：<input type="text">
        <br/>
        <br/>
        密 码：<input type="password">
  </fieldset>

网址控件

<!-- 网址控件 -->
<input type="url">

搜索控件

<!-- 搜索控件 -->
<input type="search">

日期控件：年月日

<!-- 日期控件 -->
<input type="date">

月份控件：获得年月

<!-- 月份控件 -->
<input type="month">

星期控件：获得星期

<!-- 星期控件 -->
<input type="week">

时间控件：小时分钟

<!-- 时间控件 -->
<input type="time">

邮件控件

<!-- 邮件控件 aa@aa.com -->
<input type="email">

数字控件

<!-- 数字控件 -->
<input type="number" step="5">

滑块控件

<!-- 滑块控件 -->
<input type="range" step="50">

颜色控件

<!-- 颜色控件 -->
<input type="color">

常用新属性

placeholder：占位符提供可描述输入字段预期值的提示信息：当用户输入的时候，里面的文字消失，删除所有文字，自动返回

<!-- 占位符 -->
<input type="text" placeholder="请输入用户名">

autofocus：规定当页面加载时 input 元素应该自动获得焦点

<!-- 自动获得焦点 -->
<input type="text" autofocus>

mutiple：多文件上传

<!-- 多文件上传 -->
<input type="file" multiple>

autocomplete：规定表单是否应该启用自动完成功能

<!-- 自动记录 -->
1、autocomplete 首先需要提交按钮
2、这个表单您必须给他名字
<input type="text" autocomplete="off">

required：必填项，内容不能为空

<!-- 必填，不能为空 -->
<input type="text" required>

accesskey：规定激活（使元素获得焦点）元素的快捷键：采用alt+字母的形式

<!-- 使元素获得焦点 -->
<input type="text" accesskey="s">

多媒体标签

embed（会使用）：
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

优酷，土豆，爱奇艺，腾讯、乐视等等

先上传
在分享

audio：
HTML5通过<audio>标签来解决音频播放的问题。

<!-- 通过src指定音频文件的路径即可 -->
    <audio src="bgground.mp3" autoplay="autoplay" controls loop="-1"></audio>

并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay：自动播放
controls：是否显不默认播放控件
loop：循环播放，loop = 2就是循环2次；loop 或者loop = "-1"是无限循环
多浏览器支持的方案，如下图

<!-- 为了浏览器兼容，我们需要做三种声音文件 ogg mp3 wav -->
    <audio controls autoplay>
        <source src="bgground.mp3" />
        <source src="bgground.ogg" />
        <source src="bgground.wav" />
        您的浏览器不支持声音
    </audio>

video：
HTML5通过<audio>标签来解决音频播放的问题。

<!-- 通过src指定视频文件的路径即可 -->
    <video>src="mp4.mp4" autoplay controls></video>

同样，通过附加属性可以更友好的控制视频的播放
autoplay：自动播放
controls：是否显示默认播放控件
loop：循环播放
width：设置播放窗口宽度
height：设置播放窗口的高度

<!-- 为了浏览器兼容，我们需要做三种视频文件 ogg mp4 webM -->
    <audio controls autoplay>
        <source src="ogg.ogg" />
        <source src="mp4.mp4" />
        <source src="webM.webM" />
        您的浏览器不支持视频播放
    </audio>