三、HTML学习笔记
|
1
|
小田 同志
|
|
前端
|
169

2496 字
|
55 分钟

HTML简介

HTML（超文本标记语言）

网页 结构（HTML）+表现（CSS）+行为（JS）

超文本：暂且理解为超级的文本，和普通文本比，内容更丰富

标记 （元素）：文本要变成超文本，就需要用到各种标记符号

语言：每一个标记的写法，读音，使用规则，构成标记语言

如何创建HTML文件

​ 鼠标右键->新建文本文件->更改后缀名.html

创建文件所需要注意事项

  • 可以以中文命名，但是不允许使用中文（我）。
  • 不允许使用特殊字符。
  • HTML文件名推荐使用小写。
  • 如果是多个单词创建的文件名，推荐使用驼峰命名法，每个单词首字母大写 HelloWorld
  • 创建完HTML文件后依然是文本文件格式，那么需要将系统中隐藏已知文件类型扩展名勾选掉。

HTML标签相关

HTML标签

标签是HTML的最基本的单位，也是最重要的组成部分，通常用两个角括号括起来得：”<” 和 “>”。

标签有两种形式：

  1. 成对标签(双标签)内容
  2. 不成对标签(单标签)

HTML标签的大小写问题

标签是大小写无关的，与表示意思一样。

注意：HTML标签推荐使用小写

HTML标签属性

  1. HTML属性一般都出现在HTML标签中，是HTML标签的一部分。
  2. 标签可以有属性，包含了额外的信息，属性的值一定要在双引号中。而且标签还可以存在多个属性。
  3. 一般属性由属性名和属性值成对出现：
  • 语法： <标签名 属性名1=“属性值” 属性名2=“属性值”>

HTML颜色值的设置

  1. 浏览器都支持颜色名称集合，颜色值是一个关键字或者是一个RGB格式的数字，在网页中都用的很多。
  2. 使用英文单词作为颜色值：
  • red 红色 | green 绿色 | blue 蓝色 | pink 粉色 | purple 紫色等。
  1. 六位的十六进制颜色值：
  • ff0000 简写：#f00
  • 前两位表示红色，中间两位表示绿色，最后两位表示蓝色。

HTML注释

注释的内容不会被浏览器解释出来

  1. 注释的好处：
  • 方便查找、比对、方便其他程序员快手了解你得代码、方便以后自己对自己代码理解和修改。
  • 注释的内容不会被浏览器解析出来。
  • 格式:
<!--书写输入的内容-->

HTML的代码格式

  • 任何回车或者空格在源代码中都不起作用，所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰便于团队合作，必须保持严格的缩进规则，缩进以tab键为准。
  • 任何的回车或者空格或者tab键在内容当中指挥被解析为一个小空格

写代码的软件

（我最喜欢用的）WebStorm：https://www.jetbrains.com/zh-cn/webstorm

Visual Studio Code：https://code.visualstudio.com/

HTML主体结构

<!DOCTYPE html><!--声明头-->
<html lang = "en" >
        <!--头标签-->
	<head >
		<meta charset = "UTF-8" >
		<title >Title</title >
		<link rel = "stylesheet" href = "" >
		<style ></style >
	</head >
        <!--体标签-->
	<body >
	
	</body >
	<script ></script >
</html >

1.最顶部声明<!DOCTYPE html>

  • 声明是文档的第一成份，位于文档的最顶部。
  • 该标签就是告诉浏览器所使用的HTML规范。

2.以开始，以结束，中间包含头部标签及主体标签

标签中常用的标签

head标签

<head lang="en">
  <!--
    lang是language的意思,lang="en" 属性对页面声明主要语言，en表示英文，zh-cn表示中文。
    搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你得站点是中文站，这些都是HTML规范，越规范，越容易被收录
    -->
</head>

title标签

<title></title> 设置页面字符串

meta标签

<meta charset="utf-8" /> 设置页面字符集
<meta http-equiv="content-type" content="text/html;charset=utf-8" />设置页面字符集（HTML4的设置方式）
<!--
    .html text/html  指的是文件mime类型
    .css  text/css
    .jpg  image/jpeg
    .jpeg  image/jpeg
    .png   image/png
    .gif   image/gif
    www.baidu.com  文件mime类型
-->
<!--http-equiv 告知浏览器的行为-->
<meta http-equiv="refresh" content="5;url=https://www.lmonkey.com" /> 设置5秒后自动跳转到学习猿地
<meta http-equiv="refresh" content="5" />设置浏览器5秒刷新一次
<!--name 告知浏览器的内容-->
<meta name="keywords" content="关键字1,关键字2"/> 设置网站关键字，多个关键字之间用英文状态下的逗号分割
<meta name="description" content="描述的内容" />设置网站的描述
<!--阻止移动浏览器自动调整页面大小-->
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
<!--
    name = "viewport" 说明此meta标签定义视口的属性
    initial-scale = 2.0 意思是将页面放大两倍
    width = device-width 告诉浏览器页面的宽度的能与设备的宽度
-->
<meta name="viewport" content="width=device-width,maximun-scale=3,minimum-scale=0.5" />
<!--允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半-->
<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
<!--禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放。user-scalable=no是禁止缩放-->

link标签

<link />定义两个文档之间连接的关系
<!--
    rel = "表示文档与被连接文档之间的关系"
    type = "被连接文档的类型"
    href = "被连接文档的地址"
-->
<link rel="icon" type="" href=""/>加载标题icon图标
<!--了解级别-->
<link rel="stylesheet" type="text/css" href="" />加载CSS样式

style标签

<style></style> 加载CSS样式

script标签

<script></script> 加载JS脚本

body中常用标签

p标签

<p></p>  <!--段落标签-->
特点"与上行文本和下行文本间隔一行"
块状标签：独占一行
<!DOCTYPE html>
	<html lang = "en">
	<head>
		<meta charset = "UTF-8">
		<title>Title</title>
	</head>
	<body>
		<p>我是一个p标签</p>
	</body>
</html >

b标签

<b></b>  <!--加粗-->
物理标记
行内元素：不会独占一行
<!DOCTYPE html>
<html lang = "en" >
	<head>
		<meta charset = "UTF-8">
		<title >Title</title>
	</head>
	<body>
		<b>我是一个b标签</b>
	</body>
</html>

strong标签

<strong></strong>  <!--强调某段文本-->
逻辑标记
<!DOCTYPE html>
<html lang = "en" >
		<head>
			<meta charset = "UTF-8">
			<title >Title</title>
		</head>
		<body>
			<strong>我是一个strong标签</strong>
		</body>
</html>

em标签

<em></em>   <!--强调某段文本-->
逻辑标记
<!DOCTYPE html>
<html lang = "en" >
		<head>
			<meta charset = "UTF-8">
			<title >Title</title>
		</head>
		<body>
			<em>我是一个em标签</em>
		</body>
</html>

hr标签

<hr />    <!--水平线-->
<!DOCTYPE html>
<html lang = "en" >
       <head>
          <meta charset = "UTF-8">
          <title >Title</title>
       </head>
       <body>
          <hr />
       </body>
</html>

u标签

<u></u>    <!--下划线标签-->
<!DOCTYPE html>
<html lang = "en" >
       <head>
          <meta charset = "UTF-8">
          <title >Title</title>
       </head>
       <body>
          <u>我是下划线</u>
       </body>
</html>

del标签

<del></del>    <!--删除线标签-->
<!DOCTYPE html>
<html lang = "en" >
       <head>
          <meta charset = "UTF-8">
          <title >Title</title>
       </head>
       <body>
          <del>我是删除线</del>
       </body>
</html>

hn标签

<h1></h1> 一级 都具备加粗功能（行业内默认一个网页中最好只有一级标题）
<h2></h2> 二级
<h3></h3> 三级
h1到h3的应用频率非常高
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。        
<h4></h4> 四级
<h5></h5> 五级
<h6></h6> 六级
h4到h6的应用频率低	
<!DOCTYPE html>
<html lang = "en" >
		<head>
			<meta charset = "UTF-8">
			<title >Title</title>
		</head>
		<body>
			<h1>我是h1标签</h1>
			<h2>我是h2标签</h2>
			<h3>我是h3标签</h3>
			<h4>我是h4标签</h4>
			<h5>我是h5标签</h5>
			<h6>我是h6标签</h6>
		</body>
</html>

bdo标签

<bdo></bdo>    
<!--覆盖默认的文本方向 dir="ltr | rtl"  ltr  left to right   rtl right to left-->
<!DOCTYPE html>
<html lang = "en" >
		<head>
			<meta charset = "UTF-8">
			<title >Title</title>
		</head>
		<body>
			<bdo dir = "ltr" >111111</bdo >
			<bdo dir = "rtl" >111111</bdo >
		</body>
</html>

sub和sup标签

<sub></sub>    <!--下标文本-->
<sup></sup>    <!--上标文本-->
<!DOCTYPE html>
<html lang = "en" >
		<head>
			<meta charset = "UTF-8">
			<title >Title</title>
		</head>
		<body>
			aaa<sub>111</sub>
			<br>
			bbb<sup>1111</sup>
		</body>
</html>

details和summary标签

<details></details>    <!--交互式控件、可见的或者隐藏的补充细节-->
<summary></summary>    <!--为details定义标题-->

<details>
  <summary></summary>
</details> 
<!DOCTYPE html>
<html lang = "en" >
		<head>
			<meta charset = "UTF-8">
			<title >Title</title>
		</head>
		<body>
			<details>
				<summary>点击查看更多信息</summary>
				<p>这是隐藏的详细信息，点击上面的标题可以展开或折叠。</p>
			</details>
		</body>
</html>

dialog标签

<dialog></dialog>    <!--定义对话框或窗口  open="true"-->

pre标签

<pre></pre>    <!--原格式输出-->

figure标签

<figure></figure>    <!--用于对元素进行组合。多用于图片与图片描述组合-->
<figure>
    <img src="img.gif" alt="figure标签"  title="figure标签" />
    <figcaption>figure的标题</figcaption>
</figure>

mark标签

<mark></mark> <!--标记文本-->
<mark></mark>
    定义带有记号的文本，它会给你要突出显示的文本下加个背景色。
    如：<p>你是<mark>大长腿</mark>吗？</p>

语义化标签

布局中使用

div和section标签

<div></div>         块状元素 代表一个区块  H4
<section></section> 块状元素   H5

span标签

<span></span>       行内元素  H4

header标签

<header></header>   头部标签  H5

footer标签

<footer></footer>   底部标签 H5

nav标签

<nav></nav>         导航标签 H5

address标签

<address></address> 地址    H5

article标签

<article></article> 文章标签  H5

aside标签

<aside></aside>     侧边栏   H5

列表标签

什么是列表

li 标签 需要套用在 ul 或 ol 中

ul 、li 和 ol 都是块元素

ol标签定义有序列表

ul标签定义无序列表

li标签定义列表项目

列表标签

<ul></ul>  无序列表
<ol></ol>  有序列表
<li></li>  为有序或无序列表定义列表项
<dl></dl>  定义列表
<dt></dt>  定义列表中的一个项目
<dd></dd>  为定义列表项作描述

有序列表（ol）

<ol>
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
  <li>内容4</li>
</ol>

无序列表（ul）

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
  .......
  <li>列表项 4</li>
</ul>
无序列表的特点是每个列表项前面会有一个默认的符号，通常是小圆点。

不论是有序标签，还是无序标签，都可以实现嵌套之后，形成多层级列表的效果

自定义标签（dl）

dl（自定义列表的外边界）
dt（列表项中的标题）
dd（列表项中的内容）

自定义列表用于对术语或名词进行解释和描述。
<dl>
  <dt>名词 1</dt>
  <dd>名词 1 的解释 1</dd>
  <dd>名词 1 的解释 2</dd>
  <dt>名词 2</dt>
  <dd>名词 2 的解释 1</dd>
  <dd>名词 2 的解释 2</dd>
  <!-- 可根据需要继续添加更多的术语和解释 -->
</dl>

列表在网页布局中有着广泛的应用，比如可以用于制作导航栏、侧边栏的内容展示等。

对于列表的样式，我们可以通过 CSS 进行更加丰富和个性化的设置。比如修改列表项的符号、颜色、间距等。

超链接标签和多媒体标签

a标签

<a></a>
<!--常用属性-->
<!--
    href = "" 用于定义需要跳转页面的地址
    target = "" 定义页面打开的方式
    常用的值：
        _self默认，当前窗口打开链接的文档
        _blank,在新窗口中打开文档
-->
<!--
锚点：快读定位到页面中需要的位置
如何实现
在要到达的a标签中设置id属性，属性名自定义
在点击的a标签的href属性中使用#自定义属性名即可实现关联
-->
<a href="#one">点击跳转的地方</a>
<a id="one">到达的地方</a>

多媒体标签

<img /> 图像标签
    src="要引入图片的地址"
    width="设置图片的宽度"
    height="设置图片的高度"
    alt="当图片加载失败时用于替换的文字信息"
    title="设置标题"
    usemap="关联地图"
    行内元素，单标签
<map></map> 定义图像映射(图片带有可点击区域)
    name 定义映射名称 (与usemap属性进行关联)
<area /> 定义映射区域
    shape定义形状
    coords 坐标点
    href 跳转的地址
    target 跳转方式
<audio></audio> 音频标签
    src 引入音频地址
    controls 播放控件
    loop 循环播放
<source />用来加载媒介资源
    src
<video></video>
    controls
    poster 视频在点击播放前用于显示的图片
    loop

<embed /> 用来引入媒体
    src
    width
    height
<progress></progress>  进度条标签
    min 最小值
    max 最大值
    value 当前值
<meter></meter> 定义范围内度量
    min 最小值
    max 最大值
    value 当前值
    low 警告的最小值
    high 警告的最大值
    optimum 良好值

表格相关标签及属性

表格是一种以行和列的形式来展示数据的结构。

表格由<table>标签定义，行由<tr>标签定义，单元格由<td>或<th>标签定义。

<th>用于表头单元格，通常会加粗显示以区别于普通单元格<td>。

  • 表格相关标签
<table></table> 表格
<caption></caption>  表格标题
<tr></tr>  表格的行
<th></th>  表头单元格
<td></td>  表格的单元格
<thead></thead>  表格头部
<tbody></tbody>  表格主体
<tfoot></tfoot>  表格底部

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>这是页面的标题</title>
		<link rel="icon" href="./img/尼玛币.png" />
	</head>
	<body>
		<table border="1">
			<caption>表格标题</caption>
			<!-- thead、tbody、tfoor无意义 -->
			<thead>
				<tr>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<!-- ..... -->
				</tr>
			</thead>
			<tbody>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<!-- ..... -->
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<!-- ..... -->
				</tr>
			</tfoot>
		</table>
	</body>
</html>

  • 表格中的行，即有几对 tr 就有几行
  • 和 都是单元格 但 th 包含表头的含义，具备加粗和居中的效果
  • table标签常用属性
属性描述说明
width表格宽度
heigh表格高度
align表格在页面的水平摆放位置取值：left/center/right
backgroud表格的背景图片
bgcolor表格的背景颜色
border表格边框的宽度（以像素为单位）表格默认没有边框
bordercolor表格边框颜色当border>1时起作用
cellspacing单元格之间的间距
cellpadding单元格内容与单元格边界之间的空白距离大小
  • tr(行)标签常用属性
属性描述
heigt行高
align行内容的水平对齐方式
valign行内容的垂直对齐方式
bgcolor行的背景图片
  • th（表头单元格）td(表格单元格)标签常用属性
属性描述
width/height单元格的宽度和高度
align设置水平对齐方式，取值：left/center/right
valign设置垂直对齐方式，可取值top/middle/bottom
bgcolor单元格的背景颜色
colspan设置单元格跨列
rowspan设置单元格跨行

表单相关标签

表单举例：

表单标签

<form></form>用于为用户输入创建HTML表单
<!--
    必须属性：
    action -- 浏览者输入数据被传送到的地方，比如一个PHP页面
    method -- 数据传送的方式
    get -- 此方式传递数据量少，但是传递的信息会显示在网址上。(搜索的)
    post -- 此方式传递信息多，而且不会把传递的信息显示在网址上。(跟用户相关的信息)
-->
<input />为用户定义需要使用的表单项
<!--
        name -- 此表单项的名称
        value -- 此表单项的值
        type -- 代表一个输入域的显示方式(输入型、选择型、点击型)
-->
<input type="text" name="" value="" /> 普通文本域
<input type="password" name="" value="" /> 密码域
<input type="radio" name="" value="" />单选
<!--
    name名称保持一致 才能参数排斥
    checked属性可以使单选和复选框做默认选中
-->
<input type="checkbox" name="" value="" /> 复选
<label></label>为input元素定义标注(绑定元素)
<input type="file" name="" value="" />文件上传
<!--
    如果表单项中出现文件上传选项那么需要左两件事
第一：表单的传输方式必须为post方式
第二：更改表单传输编码格式 在form标签中增加属性enctype="multipart/form-data"

-->
<input type="submit" name="" value="" />提交按钮
<input type="image" src="" title="" alt="" />用图片代替提交按钮
<input type="reset" name="" value="" />重置按钮
<input type="hidden" name="" value="" />隐藏域
<input type="button" name="" value="" />按钮
<button></button> 提交按钮
<button type="submit"></button>提交按钮
<button type="button"></button>按钮
<textarea></textarea> 多行文本输入域
<select></select>下拉列表
<option></option>为下拉列表定义列表项
<!--
    selected 让某一个下拉列表默认选中
-->
<!--H5新增类型-->
<fieldset></fieldset>将表单内的相关元素分组
<legend></legend>为fieldset定义标题
<optgroup></optgroup>为下拉列表定义分组
<datalist></datalist>定义可选数据列表
<input type="email" name="" value="" /> 邮箱验证表单
<input type="url" name="" value="" /> URL验证表单
<input type="number" name="" value="" /> 数值表单
<input type="range" name="" value="" />  滑块验证 范围验证
<input type="search" name="" value="" />  搜索域
<input type="color" name="" value="" />   颜色选取
<input type="tel" name="" value="" />   电话表单
<input type="date" name="" value="" />   日期
<input type="time" name="" value="" />  时间
<input type="week" name="" value="" />   周
<input type="month" name="" value="" />  月
<input type="datetime-local" name="" value="" />  完整的时间格式格式
<!--表单中常用的属性-->
<!--
readonly 输入域可以选择，但是无法修改。(只读)
disabled 输入域无法获取焦点，无法选择，以灰色显示 (禁用)
selected 为下拉列表定义默认选种
autofocus 自动获取焦点属性
placeholder 表单提示信息
required 用于强制用户必须为该表单赋值，否则提示信息
min 用于设定表单的最小值  number   range
max 用于设定表单的最大值   number  range
multiple 设定当前表单允许同时选中多个文件，适用于input[type=file]
pattern 用于自定义验证规则(需要配合正则的语法)
step 设定跳步的数值或者设定2个数值之间的间隔
novalidate 取消表单验证，适用于form标签
formaction 用于在提交按钮中修改当前表单的提交页面
formmethod 用于在提交按钮中修改当前表单的提交方式
formenctype 用于在提交按钮中修改当前表单提交数据编码类型(不用，文件上传时适用)
tabindex    切换索引属性
-->

HTML全局属性和框架标签

contentEditable 内容可编辑属性
designMode 页面可编辑属性

<frameset></frameset>代替body标签定义框架页(H5取消)
    <!--
        rows 水平切割
        cols 垂直切割
    -->
<frame />定义frameset标签中每个框架页的内容(H5取消)
    <!--
        src  引入新页面的地址
        name 为该页面起名
    -->
<iframe></iframe>在页面中开一块空间连接一个子页面
    <!--
        frameborder 设置边框
        src 引入页面地址
        width 宽度
        height 高度
    -->

HTML字符实体

在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实

体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须

在 HTML 源码中插入字符实体。

字符实体由三部分组成：一个 & 和 一个实体名称（或者一个 # 和 一个实体编号），最后加上一个分号 ; 。

完整实体列表，请参考：HTML Standard (whatwg.org)

常见字符实体总结：

描述实体名称实体编号
空格 &nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
“引号&quot;&#34;
´反引号&acute;&#180;
￠分（cent）&cent;&#162;
£镑（pound）&pound;&#163;
¥元（yen）&yen;&#165;
€欧元（euro）&euro;&#8364;
©版权(copyright)&copy;&#169;
®注册商标&reg;&#174;
™商标&trade;&##8482;
×乘号&times;&#215;
÷除号&divide;&#247;

下一节

四、CSS学习笔记
文末附加内容
HTML

评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
一、前端介绍学习笔记

							
							

							
二、MarkDown语法学习笔记

							
							

							
四、CSS学习笔记

							
							

							
五、JavaScript学习笔记（还未编写完）