HTML基础总结

作者: 不求而得的小确幸 | 来源:发表于2019-03-09 23:37 被阅读0次

2018web前端最新面试题总结
HTML 基础总结
HTML基础总结
HTML基础总结
HTML基础总结
Html初级知识总结
w3c School读书笔记（一）：HTML基础
html css基础总结
09 html基础总结
HTML基础标签总结

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

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>

2018web前端最新面试题总结
2018web前端最新面试题总结一、Html/Css基础模块基础部分什么是HTML？答： HTML并不是...
HTML 基础总结
我不记得这是第几次开始学习HTML了，但不得不承认直到现在还是有很多问题都没搞清楚，所以不得不重新梳理一遍... ...
HTML基础总结
html的基本结构语法：<标签> eg：规范：1.用<和>括起来；2.分为双标签和单标签；(...
HTML基础总结
HTML基础知识总结 HTML基本概念什么是HTML？ HTML是用来描述网页的一种语言 HTML指的是超文本标...
HTML基础总结
都是自己学习时候总结的，如有错误以及需要改进的地方，请大家尽管指出，共同进步，谢谢。 HTML(Hyper t...
Html初级知识总结
一、Html初级知识总结 1.基础知识脑图总结 2.基本简介 2.1.什么是Html Html不是编程语言，而是用...
w3c School读书笔记（一）：HTML基础
html的基础知识 w3c_html基础教程总结文档的基本结构脑图常见元素 HTML元素语义的分类结构类 ...
html css基础总结
未完待续 Html css “Html5的使命是详细分析各web浏览器所具有的功能,…” 各大浏览器的特征是什么,...
09 html基础总结
就好比，我们建房子，钢筋水泥是HTML结构;刷漆（红的，绿的等）是css;电梯上下走是我们的js 注意：所有的代码...
HTML基础标签总结
一、HTML基础标签 1、文档声明（1）文档声明，声明当前网页版本html5的文...

HTML基础总结

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

一、HTML文档结构：

二、HTML普通标签

1、段落标签

2、文字标签

3、图片标签

4、超链接标签

5、列表标签

6、表格标签

练习

三、HTML表单标签

四、HTML5标签

常用新标签：

新增的type属性值：

常用新属性

多媒体标签

相关文章

2018web前端最新面试题总结

HTML 基础总结

HTML基础总结

HTML基础总结

HTML基础总结

Html初级知识总结

w3c School读书笔记（一）：HTML基础

html css基础总结

09 html基础总结

HTML基础标签总结

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员