前端入门HTML篇_
作者：小桥流水78 | 2024-07-18 12:49:40
赞
踩

前端学习

HTML篇

[W3school：https://www.w3school.com.cn/html/index.asp]

HTML是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。html是制作网页的基础，我们在网络营销中讲的静态网页，就是以html为基础制作的网页。

<img src = "photo.jpg" />
//src为属性名  "photo.jpg"为属性值
1
2

<!doctype html>
<html>
    <head>
        <meta charset="UTF- 8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <p>段落内容</p>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

标签是什么？

HTML标签是由一对尖括号包裹的单词构成例如: <html>
所有标签中的单词不可能以数字开头；
标签不区分大小写 <html> 和 <HTML> 推荐使用小写；
标签分为两部分: 开始标签 <a> 和结束标签 </a>，两个标签之间的部分，我们叫做标签体；
有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签。例如: <br/><hr/><input/><img/>
标签可以嵌套。但是不能交叉嵌套。 <a><b></a></b>
```
<标签>内容</标签>
1
```

HTML标签的作用：

标记    类型    译名或意义    作用    备注
文件标记
<html>    ●    文件声明    让浏览器知道这是 HTML 文件
<head>    ●    开头    提供文件整体资讯        
<title>    ●    标题    定义文件标题，将显示于浏览顶
<body>    ●    本文    设计文件格式及内文所在
排版标记
<!--注解-->    ○    说明标记    为文件加上说明，但不被显示        
<p>    ○    段落标记    为字、画、表格等之间留一空白行        
<br>    ○    换行标记    令字、画、表格等显示于下一行        
<hr>    ○    水平线    插入一条水平线        
<center>    ●    居中    令字、画、表格等显示于中间    反对
<pre>    ●    预设格式    令文件按照原始码的排列方式显示        
<div>    ●    区隔标记    设定字、画、表格等的摆放位置        
<nobr>    ●    不折行    令文字不因太长而绕行        
<wbr>    ●    建议折行    预设折行部位        
字体标记
<strong>    ●    加重语气    产生字体加粗    bold    的效果        
<b>    ●    粗体标记    产生字体加粗的效果        
<em>    ●    强调标记    字体出现斜体效果        
<i>    ●    斜体标记    字体出现斜体效果        
<tt>    ●    打字字体    courier字体，字母宽度相同        
<u>    ●    加上底线    加上底线    反对
<h1>    ●    一级标题标记    变粗变大加宽，程度与级数反比        
<h2>    ●    二级标题标记    将字体变粗变大加宽        
<h3>    ●    三级标题标记    将字体变粗变大加宽        
<h4>    ●    四级标题标记    将字体变粗变大加宽        
<h5>    ●    五级标题标记    将字体变粗变大加宽        
<h6>    ●    六级标题标记    将字体变粗变大加宽        
<font>    ●    字形标记    设定字形、大小、颜色    反对
<basefont>    ○    基准字形标记    设定所有字形、大小、颜色    反对
<big>    ●    字体加大    令字体稍为加大        
<small>    ●    字体缩细    令字体稍为缩细        
<strike>    ●    画线删除    为字体加一删除线    反对
<code>    ●    程式码    字体稍为加宽如<tt>        
<kbd>    ●    键盘字    字体稍为加宽，单一空白        
<samp>    ●    范例    字体稍为加宽如<tt>        
<var>    ●    变数    斜体效果        
<cite>    ●    传记引述    斜体效果        
<blockquote>    ●    引述文字区块    缩排字体        
<dfn>    ●    述语定义    斜体效果        
<address>    ●    地址标记    斜体效果        
<sub>    ●    下标字    下标字        
<sup>    ●    上标字    指数（平方、立方等）        
清单标记
<ol>    ●    顺序清单    清单项目将以数字、字母顺序排列        
<ul>    ●    无序清单    清单项目将以圆点排列        
<li>    ○    清单项目    每一标记标示一项清单项目        
<menu>    ●    选单清单    清单项目将以圆点排列，如<ul>    反对
<dir>    ●    目录清单    清单项目将以圆点排列，如<ul>    反对
<dl>    ●    定义清单    清单分两层出现        
<dt>    ○    定义条目    标示该项定义的标题        
<dd>    ○    定义内容    标示定义内容        
表格标记
<table>    ●    表格标记    设定该表格的各项参数        
<caption>    ●    表格标题    做成一打通列以填入表格标题        
<tr>    ●    表格列    设定该表格的列        
<td>    ●    表格栏    设定该表格的栏        
<th>    ●    表格标头    相等于<td>，但其内之字体会变粗        
表单标记
<form>    ●    表单标记    决定单一表单的运作模式        
<textarea>    ●    文字区块    提供文字方盒以输入较大量文字
<textarea>文字区域</textarea>
<input>    ○    输入标记    决定输入形式
<input placeholder="请输入用户名">//文字框
<input type="num" min="1" max="10">//数字框可选择
<input type="data" min="2018-02-10">//日期框可选择
<select>    ●    选择标记    建立    pop-up    卷动清单   
<option>    ○    选项    每一标记标示一个选项   
//例子：
<p>//多选框，选项都显示
  <label><input type="checkbox" />声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/845731

推荐阅读

相关标签

前端入门HTML篇_ 作者：小桥流水78 | 2024-07-18 12:49:40 赞踩

前端学习

HTML篇

标签是什么？

HTML标签的作用：

前端入门HTML篇_
作者：小桥流水78 | 2024-07-18 12:49:40
赞
踩