HTML

HTML

什么是HTML

HTML是一种超文本标记语言用来描述网页

结构如下

<!DOCTYPE html>
<html lang="en"> <!-- 内容写在一对<html></html>标签中-->

<head><!-- head标签中是提供网页信息,像网页名就写在其中-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body><!-- body中就是存放网页的内容-->

</body>

</html>

什么是标签

标签是HTML中的基本单位

标签是由尖括号包围的关键字像上面的<html>,<head>,<body>

它们经常是成对出现,内容就写在一对标签标签中。

也有不成对的标签

还有标签关键字不区分大小写

常用标签

下面对常用标签进行简单的试例,详情见http://www.w3school.com.cn

基础标签

<!DOCTYPE>定义文档类型

<html>定义HTML文档

<title>网页名

<h1>到<h6>定义内容字体是几级标题

<p>定义段落,就是会换两行再起一段

<hr>单标签,定义水平线

<br>单标签,定义换行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的标签页</title>
</head>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <hr>
    <p>这是一段</p>
    <p>这是另一<br>段</p>
</body>

</html>

格式标签

<em>定义斜体文本

<small>定义小号文本

<b>定义文本加粗

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的标签页</title>
</head>

<body>
<p>常规字体</p>
<small>小号字体</small>
<b>加粗字体</b>
<em>强调字体</em>
</body>

</html>

图片与链接

<img>单标签,定义图片,一个src属性来定义地址,一个alt定义的文字是图片不出来时显示的

<a>定义链接,有个href属性填入地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二的标签</title>
</head>
<body>
<img src="https://img02.sogoucdn.com/app/a/100520024/65942bbd107b6aae59164ce2d821971c" alt="图片消失了">
<a href="https://img02.sogoucdn.com/app/a/100520024/65942bbd107b6aae59164ce2d821971c">点这个</a>

</body>
</html>

列表标签

<ul>无序列表

<ol>有序列表

<li>列表中的实际项

<dt>定义列表

<dt>定义列表中的项

<dd>项之下的解释项

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的标签页</title>
</head>

<body>

<ul>
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
    <ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
        <li>dd</li>
    </ul>
</ul>
<ol style="text-transform:lowercase">
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
    <ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
        <li>dd</li>
    </ul>
</ol>
<dl>
    <dt>aa</dt>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
    <dt>aa</dt>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
</dl>
</body>

</html>

表单标签

<form>定义供用户输入的HTML表单

<input>定义输入控件

<textarea>定义多行的文本输入控件

<select>定义下拉选择列表

<option>定义选择列表中的选项

<label>定义input元素的标注

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的标签页</title>
</head>

<body>
<form action="test2.html">
    <label >用户:</label>
    <input type="text" placeholder="输入"><br>
    <label>密码:</label>
    <input type="password"><br>
    <label>简介</label><br>
    <textarea ></textarea><br>
    <select >
        <option value="a">选项1</option>
        <option value="b">选项2</option>
        <option value="c">选项3</option>
    </select><br>
    <input type="submit">
</form>

</body>

</html>

表格标签

<table>定义表格

<caption>定义表格标题

<tr>表格的每一行

<td>行中的单元格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的标签页</title>
</head>
<body>
<table>
    <caption>我的表格</caption>
    <tr>
        <td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    <tr><td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    <tr><td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    <tr><td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
</table>
</body>
</html>

快到碗里来

!

原文发布于微信公众号 - IT那个小笔记(qq1839646816)

原文发表时间:2019-07-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券