Web开发 | HTML 介绍 & 使用总结 (一)

作者: Leon_520 | 来源:发表于2018-12-11 11:18 被阅读0次

HTML介绍

HTML 指的是超文本标记语言 (Hyper Text Markup Language), HTML 不是一种编程语言，而是一种标记语言 (markup language) , 标记语言是一套标记标签 (markup tag), HTML 使用标记标签来描述网页的

HTML标签

以下是HTML常用的标签介绍以及使用方式:

`<!DOCTYPE html>`

HTML文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题
HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多

<!DOCTYPE html>
<html>
.....
</html>

`<html></html>`

html元素是HTML文档的根元素，一个文档中只能有一个，其他所有元素都是它的后代元素

<!DOCTYPE html>
// lang属性，作用是 1.帮助语音合成工具确定要使用的发音 2.帮助翻译工具确定要使用的翻译规则
<html lang="zn">
</html>

`<head>`

head元素里面的内容是一些“元数据”; 一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标

title 网页的标题
meta 可以用于设置网页的字符编码
style 文档样式,css样式
link 链接外部样式
base 设置一些基础信息
script

<!DOCTYPE html>
<html lang="zn">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
</html>

`<body></body>`

body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构

<!DOCTYPE html>
<html lang="zn">
    <head>
        <meta charset="UTF-8">
        <title>网页title</title>
    </head>
    <body>
        <h1>标题</h1>
        <p>段落</p>
        <strong>加粗</strong>
    </body>
</html>

`<h></h>`

网页的标题 , h1 ~ h6 共规定了6个等级的标题

h元素有助于网站的SEO（Search Engine Optimization）优化，可以促进关键词排名
建议在网页中最多只有1个h1元素
乱用h元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，最后导致K站

<h1>一级标题</h1>

`<p></p>`

表示文章中的一个段落（paragraph）

<p>我是段落</p>

`<strong></strong>`

用于强调某些文本，粗体的显示效果

<strong>加粗字体</strong>

`<b>`

加粗,建议使用 Strong

<b>加粗字体</b>

`<i></i>`

斜体

<i>斜体字体</i>

`<em></em>`

斜体,推荐,也推荐使用 css 设置

<em>斜体字体</em>

`<s></s>`

删除线

<s>带删除线字体</s>

`<del></del>`

删除线,推荐, 也推荐CSS设置

<del>带删除线字体</del>

`<u></u>`

下划线

<u>带下滑线字体</u>

`<ins></ins>`

删除线,推荐, 也推荐CSS设置

<ins>带下滑线字体</ins>

`<pre></pre>`

pre 内部会保留书写格式, 保留HTML代码中的空格、换行

<pre>
    <p>   我前面有2个空格</p>
    <p>我前面没有空格</p>
</pre>

<code></code>

用于显示程序代码

<code>代码</code>

`<hr>`

就是创建横跨网页水平线的标签

<hr>

`<br>`

单标签，表示强制换行

<br>

`<img>`

img元素专门用来显示图片（img是image的缩写)

<img src="https://segmentfault.com/6f2dc.png" alt="占位文字">

img 属性

src属性（ src是source的缩写）用来设置图片的路径（URL）
- 绝对路径：完整的描述文件位置的路径
- 相对路径：由这个文件所在的文件夹引起的跟其它文件的路径关
alt 占位文字,当图片加载失败会显示
width 图片宽度
height 图片高度
img元素如果只设置了width（或height），浏览器会自动根据图片宽高比计算出height（或width）

web 中常用的图片格式有

png：静态图片，支持透明
jpg：静态图片，不支持透明
gif：动态图片、静态图片，支持透明

`<a></a>`

a元素: 定义超链接，用于打开新的URL

<a href="http://www.baidu.com" target="_blank">百度一下</a>

a元素属性

href：指定要打开的URL; Hypertext Reference的简称
target：在哪里打开URL
- _self：默认值，在当前窗口打开URL
- _blank：在一个新的窗口中打开URL
- _parent：在父窗口中打开URL
- _top：在顶层窗口中打开URL
- 某个iframe的name值：在某个iframe中打开URL

锚点链接: 锚点链接可以实现：跳转到网页中的具体位置

<a href="#one">调转到P段落</a>
<p id="one"></p>
<a href="#">回调顶部</a>

图片链接 img元素跟a元素一起使用，可以实现图片链接

<a href="http://www.baidu.com" target="_blank"><img src="图片地址" alt="占位文字" width="200" height="200"></a>

`<iframe></iframe>`

利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档

<iframe src="http://www.baidu.com" frameborder="10"></iframe>

`<base>`

可以利用base元素设置当前页面所有a元素的默认行为
base元素写在head元素中

<head>
    <meta charset="UTF-8">
    <title>网页title</title>
    <base href="http://www.baidu.com" target="_blank">
</head>

`<div></div>`

一般作为其他元素的父容器，把其他元素包住，代表一个整体, 用于把网页分割为多个独立的部分

div {
    outline: 2px solid green !important;
    }
<div>我是一个 div</div>

`<span></span>`

默认情况下，跟普通文本几乎没差别, 用于区分特殊文本和普通文本，比如用来显示一些关键字

<h1><span style="color: yellow">我是个黄色标题</span>,我后面是绿色的了.</h1>

`ol-li`

ol (ordered list）有序列表，直接子元素只能是li
li (list item）列表中的每一项

<h3>热门车系</h3>
<ol>
    <li>宝马</li>
    <li>奔驰</li>
    <li>大众</li>
</ol>

`ul-li`

ul（unordered list）无序列表，直接子元素只能是li
li（list item）列表中的每一项

<h3>大众车型</h3>
<ul>
    <li>帕萨特</li>
    <li>迈腾</li>
    <li>凌度</li>
    <li>宝来</li>
</ul>

`dl-dt-dd`

dl（definition list）定义列表，直接子元素只能是dt、dd
dt（definition term）列表中每一项的项目名
dd（definition description）列表中每一项的具体描述，是对 dt 的描述、解释、补充 ,一个dt后面一般紧跟着1个或者多个dd

<h3>蔬菜+水果</h3>
<dl>
    <dt>蔬菜</dt>
    <dd>黄瓜</dd>
    <dd>西红柿</dd>
    <dd>西蓝花</dd>
    
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>西瓜</dd>
</dl>

`table`

table-表格; tr-表格中的行; td-行中的单元格

table相关属性

border: 边框的宽度
cellpadding : 单元格内部的间距
cellspacing : 单元格之间的间距
width: 表格的宽度
align: 表格的水平对齐方式left、center、right

tr的常用属性

valign 单元格的垂直对齐方式 top、middle、bottom、baseline
align 单元格的水平对齐方式 left、center、right

th、td的常用属性

valign 单元格的垂直对齐方式 top、middle、bottom、baseline
align 单元格的水平对齐方式 left、center、right
width 单元格的宽度
height 单元格的高度
rowspan 单元格可横跨的行数
colspan 单元格可横跨的列数

table 细边框设置

table {
    // 合并边框
    border-collapse: collapse;
}
td {
    border: 1px solid #000;
}

其他元素

tbody 表格的主体
caption 表格的标题
thead 表格的表头
tfoot 表格的页脚
th 表格的表头单元格

<table>
        
        <!--        表格标题-->
        <caption>欢迎光临万达影城</caption>
        
        <!--        表格头部-->
        <thead>
        <tr>
            <th>放映时间</th>
            <th>语言版本</th>
            <th>放映厅</th>
            <th>售价(元)</th>
            <th>在线选座</th>
        </tr>
        </thead>
        <!--        表格主体-->
        <tbody>
        <tr>
            <td>13:05</td>
            <td>国语3d</td>
            <td>2号厅</td>
            <td>$68</td>
            <td><input type="button" value="选座"></td>
        </tr>
        <tr>
            <td>13:05</td>
            <td>国语3d</td>
            <td>2号厅</td>
            <td>$68</td>
            <td><input type="button" value="选座"></td>
        </tr>
        <tr>
            <td>13:05</td>
            <td>国语3d</td>
            <td>2号厅</td>
            <td>$68</td>
            <td><input type="button" value="选座"></td>
        </tr>
        <tr>
            <td>13:05</td>
            <td>国语3d</td>
            <td>2号厅</td>
            <td>$68</td>
            <td><input type="button" value="选座"></td>
        </tr>
        </tbody>
    </table>

单元格的合并

合并方向是向右、向下
删掉被覆盖掉的td元素

<td rowspan="2" colspan="2">td02</td>

`form表单`

一般情况下，其他表单相关元素都是它form的后代元素

常用属性

action 用于提交表单数据的请求URL
method 请求方法（get和post），默认是get
target 在什么地方打开URL（参考a元素的target）
enctype 规定了在向服务器发送表单数据之前如何对数据进行编码

`input`

单行文本输入框、单选框、复选框、按钮等元素

`textarea`

多行文本框

`select、option`

下拉选择框

`button`

按钮

`label`

表单元素的标题

`fieldset`

表单元素组

`legend`

fieldset的标题

`fieldset和legend`

区域边框设置

<fieldset>
    <legend>必填信息</legend>
    <div>
        <label for="username">用户名</label>
        <input type="text" name="username" id="username">
    </div>
    <div>
        <label for="pwd">密&nbsp;&nbsp;码:</label>
        <input type="password" name="pwd" id="pwd">
    </div>
    
    <div>
        <label for="code">验证码:</label>
        <input type="text" name="code" id="code"> <input type="button" value="获取验证码" tabindex="-1">
    </div>
</fieldset>

`实体字符(Character Entity)`

HTML中有一些字符是预留出来作特殊用途的，比如

小于号（<）
大于号（>）

要想在网页中正确地显示这些预留字符，必须使用字符实体，书写格式一般有2种

&entity_name;
&#entity_number;

比较常用的有

空格：
大于号：>
小于号：<
&：&

<pre>
    <code>
    &lt;div class="container"&gt;
        &lt;p&gt;Sibling 1&lt;/p&gt;
        &lt;p&gt;Sibling 2&lt;/p&gt;
        &lt;p&gt;Sibling 3&lt;/p&gt;
    &lt;/div&gt;
    </code>
</pre>

`video(视频)`

用来播放视频

video 常用属性

src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:静音
width/height: 和img标签中的一模一样

浏览器兼容问题

通过集成浏览器所有支持视频播放格式,来进行兼容,浏览器会自动选择

<video controls autoplay loop poster="video/ff.png">
    <!-- 兼容写法 -->
    <source src="video/sb1.webm" type="video/webm">
    <source src="video/sb1.mp4" type="video/mp4">
    <source src="video/sb1.ogg" type="video/ogg">
    您的浏览器不支持播放!
</video>

浏览器支持视频格式

image.png

`audio(音频)`

用于播放音频类文件,使用方式同视频类似

常用属性

autoplay 如果出现该属性，则音频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop 如果出现该属性，则每当音频结束时重新开始播放。
preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。

音频格式

image.png

<audio autoplay controls>
    <source src="video/yinyue.mp3" type="audio/mp3">
    该浏览器不支持播放!
</audio>

`details 详情概要标签`

在网页空间有限的时候,要展示更多的内容

details内部标签

summary: 对要展示的详细内容的简单概述,如果没有这个标签,默认就是"详细信息"

<details>
    <summary>吴京</summary>
    1974年，吴京出生于北京一个武术世家，是满族正黄旗[7] 。6岁开始在北京市什刹海体校练习武术。1986年，开始随武术队参加国际交流活动，同年，获得全国武术比赛拳枪刀冠军[8] 。 1989年，进入北京市武术队，并在师傅吴彬的指导下接受专业训练[9] 。1991年，获得全国武术比赛枪术、对练冠军。1994年，获得全国武术比赛精英赛枪术、对练冠军[10] 。 ASHYAS
</details>

`marquee 跑马灯标签`

标签主要用于滚动播放文字

属性

direction:设置滚动方向 left(默认)/right/up/down
scrollamount: 设置滚动速度,值越大就越快
loop: 设置滚动次数,默认是-1(无限滚动),接受数字例如 1 2
behavior:设置滚动类型 slide滚动到边界就停止,alternate滚动到边界就弹回

<marquee behavior="alternate" direction="right">
    hello,world!
</marquee>

Web开发 | HTML 介绍 & 使用总结 (一)

HTML介绍

HTML标签

<!DOCTYPE html>

<html></html>

<head>

<body></body>

<h></h>

<p></p>

<strong></strong>

<b>

<i></i>

<em></em>

<s></s>

<del></del>

<u></u>

<ins></ins>

<pre></pre>

<code></code>

<hr>

<br>

<img>

<a></a>

<iframe></iframe>

<base>

<div></div>

<span></span>

ol-li

ul-li

dl-dt-dd

table

form表单

input

textarea

select、option

button

label

fieldset

legend

fieldset和legend

实体字符(Character Entity)

video(视频)

audio(音频)

details 详情概要标签

marquee 跑马灯标签

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读