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

2018-12-11  本文已影响0人  Leon_520

HTML介绍

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

HTML标签

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

<!DOCTYPE html>

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

<html></html>

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

<head>

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

<!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个等级的标题

  1. h元素有助于网站的SEO（Search Engine Optimization）优化，可以促进关键词排名
  2. 建议在网页中最多只有1个h1元素
  3. 乱用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 属性

web 中常用的图片格式有

<a></a>

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

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

a元素属性



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

<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>

<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

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

ul-li

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

dl-dt-dd

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

table

table相关属性

tr的常用属性

th、td的常用属性

table 细边框设置

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



其他元素

<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 rowspan="2" colspan="2">td02</td>

form表单

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

常用属性

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种

比较常用的有

<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 常用属性

浏览器兼容问题

<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(音频)

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

常用属性

音频格式

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

details 详情概要标签

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

details内部标签

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

marquee 跑马灯标签

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

属性

<marquee behavior="alternate" direction="right">
    hello,world!
</marquee>
上一篇下一篇

猜你喜欢

热点阅读