前端入门HTML篇

2023-05-16

前端学习

HTML篇

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

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

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

<!doctype html>
<html>
    <head>
        <meta charset="UTF- 8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <p>段落内容</p>
    </body>
</html>

标签是什么？

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

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" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>
<p>//单选框，选项都显示
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>
<p>//滑动选择框
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>
//输入选择框
<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

图音视频标记
<img>    ○    图形标记    用以插入图形及设定图形属性
<audio src="/assets/music.ogg"
controls
></audio></audio>//音频标记,用于插入音频
<video src="/assets/video.mp4"
controls
></video>//视频标记，用于插入视频

链接标记
<a>    ●    链接标记    加入链接   
/*用法1.<a> href="https://www.bytedance.com/">"
    字节跳动官网
</a>//本页面改变
用法2.<a> href="https://www.bytedance.com/">
target="_black"
字节跳动官网
</a>//跳转到新的页面
*/

<base>    ○    基准标记    可将相对    url    转绝对及指定链接目标        
框架标记
<frameset>    ●    框架设定    设定框架        
<frame>    ○    框窗设定    设定框窗        
<iframe>    ○    页内框架    于网页中间插入框架    ie
<noframes>    ●    不支援框架    设定当浏览器不支援框架时的提示        
影像地图
<map>    ●    影像地图名称    设定影像地图名称        
<area>    ○    连结区域    设定各连结区域        
多媒体
<bgsound>    ○    背景声音    于背景播放声音或音乐    ie
<embed>    ○    多媒体    加入声音、音乐或影像        
其他标记
<marquee>    ●    走动文字    令文字左右走动    ie
<blink>    ●    闪烁文字    闪烁文字    nc
<isindex>    ○    页内寻找器    可输入关键字寻找于该一页    反对
<meta>    ○    开头定义    让浏览器知道这是    html    文件        
<link>    ○    关系定义    定义该文件与其他    url    的关系        
stylesheet  //引入css样式
<style>    ●    样式表    控制网页版面        
<span>    ●    自订标记    独立使用或与样式表同用

HTML标签中，单引号和双引号区别：

https://blog.csdn.net/shadow_zed/article/details/71076339

1.纯HTML标签下：

<html>
<head>
</head>
<body>
<input type = submit value = 提交1>`
<input type = "submit" value = "提交2">`
<input type = 'submit' value = '提交3'>`
</body>
</html>
//输出完全一样，故在纯html标签下以上三种写法是完全等效的.

2.在JS混编情况下：

转义字符串(Escape Sequence)也称字符实体(Character Entity)。

在HTML中，定义转义字符串的原因有两个：第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。

HTML特殊转义字符列表

最常用的字符实体

显示	说明	实体名称	实体编号
	半方大的空白	&ensp(加;使用)	&#8194(加;使用)

	全方大的空白	&emsp(加;使用)	&#8195(加;使用)

	不断行的空白格	&nbsp(加;使用)	&#160(加;使用)
<	小于	<	<
>	大于	>	>
&	&符号	&	&
"	双引号	"	"
©	版权	©	©
®	已注册商标	®	®
™	商标（美国）	™	™

×	乘号	×	×
÷	除号	÷	÷

其他字符

字符	十进制	转义字符	字符	十进制	转义字符	字符	十进制	转义字符
?	&#161(加;使用)	&iexcl(加;使用)	Á	&#193(加;使用)	&Aacute(加;使用)(加;使用)	á	&#225(加;使用)	&aacute(加;使用)
￠	&#162(加;使用)	&cent(加;使用)	Â	&#194(加;使用)	&circ(加;使用)	â	&#226(加;使用)	&acirc(加;使用)
￡	&#163(加;使用)	&pound(加;使用)	Ã	&#195(加;使用)	&Atilde(加;使用)	ã	&#227(加;使用)	&atilde(加;使用)
¤	&#164(加;使用)	&curren(加;使用)	Ä	&#196(加;使用)	&Auml(加;使用)	ä	&#228(加;使用)	&auml(加;使用)
￥	&#165(加;使用)	&yen(加;使用)	Å	&#197(加;使用)	&ring(加;使用)	å	&#229(加;使用)	&aring(加;使用)
\|	&#166(加;使用)	&brvbar(加;使用)	Æ	&#198(加;使用)	&AElig(加;使用)	æ	&#230(加;使用)	&aelig(加;使用)
§	&#167(加;使用)	&sect(加;使用)	Ç	&#199(加;使用)	&Ccedil(加;使用)	ç	&#231(加;使用)	&ccedil(加;使用)
¨	&#168(加;使用)	&uml(加;使用)	È	&#200(加;使用)	&Egrave(加;使用)	è	&#232(加;使用)	&egrave(加;使用)
©	&#169(加;使用)	&copy(加;使用)	É	&#201(加;使用)	&Eacute(加;使用)	é	&#233(加;使用)	&eacute(加;使用)
a	&#170(加;使用)	&ordf(加;使用)	Ê	&#202(加;使用)	&Ecirc(加;使用)	ê	&#234(加;使用)	&ecirc(加;使用)
?	&#171(加;使用)	&laquo(加;使用)	Ë	&#203(加;使用)	&Euml(加;使用)	ë	&#235(加;使用)	&euml(加;使用)
?	&#172(加;使用)	&not(加;使用)	Ì	&#204(加;使用)	&Igrave(加;使用)	ì	&#236(加;使用)	&igrave(加;使用)
\x7f	&#173(加;使用)	&shy(加;使用)	Í	&#205(加;使用)	&Iacute(加;使用)	í	&#237(加;使用)	&iacute(加;使用)
®	&#174(加;使用)	&reg(加;使用)	Î	&#206(加;使用)	&Icirc(加;使用)	î	&#238(加;使用)	&icirc(加;使用)
ˉ	&#175(加;使用)	&macr(加;使用)	Ï	&#207(加;使用)	&Iuml(加;使用)	ï	&#239(加;使用)	&iuml(加;使用)
°	&#176(加;使用)	&deg(加;使用)	Ð	&#208(加;使用)	&ETH(加;使用)	ð	&#240(加;使用)	&ieth(加;使用)
±	&#177(加;使用)	&plusmn(加;使用)	Ñ	&#209(加;使用)	&Ntilde(加;使用)	ñ	&#241(加;使用)	&ntilde(加;使用)
2	&#178(加;使用)	&sup2(加;使用)	Ò	&#210(加;使用)	&Ograve(加;使用)	ò	&#242(加;使用)	&ograve(加;使用)
3	&#179(加;使用)	&sup3(加;使用)	Ó	&#211(加;使用)	&Oacute(加;使用)	ó	&#243(加;使用)	&oacute(加;使用)
′	&#180(加;使用)	&acute(加;使用)	Ô	&#212(加;使用)	&Ocirc(加;使用)	ô	&#244(加;使用)	&ocirc(加;使用)
μ	&#181(加;使用)	&micro(加;使用)	Õ	&#213(加;使用)	&Otilde(加;使用)	õ	&#245(加;使用)	&otilde(加;使用)
?	&#182(加;使用)	&para(加;使用)	Ö	&#214(加;使用)	&Ouml(加;使用)	ö	&#246(加;使用)	&ouml(加;使用)
·	&#183(加;使用)	&middot(加;使用)	×	&#215(加;使用)	&times(加;使用)	÷	&#247(加;使用)	&divide(加;使用)
?	&#184(加;使用)	&cedil(加;使用)	Ø	&#216(加;使用)	&Oslash(加;使用)	ø	&#248(加;使用)	&oslash(加;使用)
1	&#185(加;使用)	&sup1(加;使用)	Ù	&#217(加;使用)	&Ugrave(加;使用)	ù	&#249(加;使用)	&ugrave(加;使用)
o	&#186(加;使用)	&ordm(加;使用)	Ú	&#218(加;使用)	&Uacute(加;使用)	ú	&#250(加;使用)	&uacute(加;使用)
?	&#187(加;使用)	&raquo(加;使用)	Û	&#219(加;使用)	&Ucirc(加;使用)	û	&#251(加;使用)	&ucirc(加;使用)
?	&#188(加;使用)	&frac14(加;使用)	Ü	&#220(加;使用)	&Uuml(加;使用)	ü	&#252(加;使用)	&uuml(加;使用)
?	&#189(加;使用)	&frac12(加;使用)	Ý	&#221(加;使用)	&Yacute(加;使用)	ý	&#253(加;使用)	&yacute(加;使用)
?	&#190(加;使用)	&frac34(加;使用)	Þ	&#222(加;使用)	&THORN(加;使用)	þ	&#254(加;使用)	&thorn(加;使用)
?	&#191(加;使用)	&iquest(加;使用)	ß	&#223(加;使用)	&szlig(加;使用)	ÿ	&#255(加;使用)	&yuml(加;使用)
À	&#192(加;使用)	&Agrave(加;使用)	à	&#224(加;使用)	&agrave(加;使用)

——————————————————————————————————————

JavaScript转义字符

转义字符	含义
\b	退格
\t	TAB,水平
\v	TAB,垂直
\n	回车换行
\r	换行
"	双引号
’	单印号
\	\
\uhhhh	十六进制编码的Unicode字符

——————————————————————————————————————

1、传递参数为字符串

searchResultContent = searchResultContent 
    + "<tr><td align='center'>" 
    + i 
    +"</td><td align='center'>" 
    + graphic.attributes["NAME"]
    +"</td><td align='center'>摄区</td><td align='center'>类型</td><td align='center'>生产时间</td>" + "<td align='center'"
    + "onclick = generateDetails('" 
    +graphic.attributes["NAME"] 
    + "');"
    + ">详细信息</td></tr>";

2、传递参数为数字

searchResultContent = searchResultContent + "<A " 
    +"onclick = lightenGraphic(" 
    +index + "," 
    + position
    + ");"
    + "href=\"javascript:void(0)\";>"
    +graphic.attributes["zonename"]
    + "</A>" 
    + " ";

3.事件绑定函数

//事件绑定函数中传递参数，如果参数是数字，不用单引号，如果是字符串，要用单引号；

//并列绑定的事件之间不需要加入分号，否则后边的事件不能绑定                

searchResultContent = searchResultContent 
    + "<A " 
    +"onmouseout = unlightenGraphic(" 
    + index 
    + ") " 
    +"onclick = lightenGraphic(" 
    + index 
    + "," 
    + position 
    + ");" 
    +"href=\"javascript:void(0)\"; style=\"cursor:pointer\";>" 
    +graphic.attributes["zonename"] 
    +"</A>" 
    + "  ";

语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义，传达内容而不是样式
开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言

语义化的好处：

代码可读性
可维护性
搜索引擎优化
提升无障碍性

如何做到语义化？

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)