• HTML

    • 网站与网页

      • 关于HTML
      • Web标准

    • HTML标签

      • 标签关系
      • 基本结构标签

    • 常用标签

      • 标题标签
      • 段落标签和换行标签
      • 文本格式化标签
      • 盒子标签
      • 图像标签
      • 超链接标签
      • 注释标签与特殊字符

    • 表格标签

      • 表格结构标签

    • 列表标签

      • 无序列表
      • 有序列表
      • 自定义列表

    • 表单Form

      • 表单控件

        • input输入表单标签
        • iabel标签
        • select下拉表单标签
        • textare文本域标签

HTML

网站与网页

网站(Website)是因特网(Internet)上根据一定的规则，使用HTML等知足的用于展示特定内容的网页的集合
网页是网站中的一"页"，通常是HTML格式的文件，使用浏览器阅读

网站的后缀通常是htm或html

关于HTML

HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言
HTML不是一种编程语言，只是一种标记语言

Web标准

Web标准是由W3C（万维网联盟）组织和其他标准化组织制定的一系列标准的组合。W3C是国际最著名的标准化组织
Web标准由结构(Ptructure)、表现(Presentation)、行为(Behavior)
结构写于HTML文件中，表现写于CSS文件中，行为写于JavaScript文件中

HTML标签

HTML中的标签分为两种:双标签、单标签
1.双标签:以<html>`一对标签为例，</>`表示结束
2.单标签:仅有一个标签而非成对存在，大部分标签均为双标签，常见的单标签有:<img />、<link />、<br />、<meta>

标签关系

包含关系

<head>
    <title></title>
</head>

并列关系

<head></head>
<body></body>

基本结构标签

每个网页都会有基本结构标签(又称骨架标签)
\<html>\</html>:页面中最大的标签，称为根标签
\<head>\</head>:文档的头部，head必须设置的标签是title
\<title>\</title>:文档的标题
\<body>\</body>:文档的主题

骨架快速生成
使用VSCode文本编辑器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE >语句用于向浏览器说明该网页所使用的html版本，<!DOCTYPE html>则代表使用的是最新的HTML5
\<html lang="">:向浏览器说明该网页的语言(不影响网页中的文字内容)，en英语、zh-CN中文简体、ja日文
\<meta charset="">:标签有多个属性取值，charset用于设置网页的字符集(Character set)，是多个字符的集合，便于计算机能够识别和存储各种文字。charset常用的值有:GB2312、BIG5、GBK和UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符，因此现在网页基本都用UTF-8，不要写成utf-8、UTF8！！！

标签中的属性与值的形式是key='value'即属性="值"

常用标签

标题标签

\<h1>-<\h6>共有六级，数字越写，标题越大，标题标签内的文字默认加粗

<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>

段落标签和换行标签

\<p>用于分段，\<br>用于换行

你这样写

是不可能分段的在网页里
<p>这是一个段落</p>
<p>这是另一个段落，这才是正确的分段方法</p>
这个是分<br/>
行，强制的

文本格式化标签

加粗、倾斜、删除线、下划线，支持套娃

语义标签说明
加粗或推荐使用前者，语义更强烈
倾斜或推荐使用前者，语义更强烈
删除线或推荐使用前者，语义更强烈
下划线或者推荐使用前者，语义更强烈
加粗的属性为重点，其它的可以不记

盒子标签

\<div>\</div>与\<span>\</span>，均没有具体语义，定义大小盒子装内容，方便布局；
div一行只支持一对，单独一行，大盒子(类似于标题标签，自动分行)
span相反，小盒子

图像标签

\<img scr="图片路径"/>典型的单标签，支持相对路径、绝对路径或URL超链接
属性

属性属性值说明
src图片路径必须属性
alt文本图像不能显示时显示的文字，替换文本
title文本鼠标放到图像上显示的文本，提示文本
width像素图像宽度
height像素图像高度
border像素图像边框粗细(非重点，多用CSS实现)
像素:PX，删除线的非重点不记

超链接标签

\<a href="链接">\</a>，链接分类:

  1. 外部链接，如<a href="https://iamlolicon.work">糊狸的博客</a>
  2. 内部链接，如<a href="idnex.html">首页</a>
  3. 空链接，无明确链接目标时，<a href="#"></a>
  4. 下载链接，href内指向文件、压缩包等类型，点击则会下载
  5. 网页元素链接，文本、图像、表格、音频、视频均可加超链接

  6. 锚点链接，点击时跳转到网页的指定位置，href属性内需要加#+ID名，id名在标签内用id属性定义

    <!-- 锚点链接示意 -->
<h2>目录</h2>
<a href="#two">点我跳到第二段</a>

<h2>第一段</h2>
 <p>假设这里有大一段的文字...</p>
<h2 id="two">第二段</h2>
 <p>假设这里有大一段的文字...</p>
<!-- 同理，可以写一个跳转到网页顶部，id绑定到body上 -->

    target属性:两种取值，_self与_blank，用于打开网页的形式，前者是直接在浏览器当前标签页中打开，后者是在新标签页中打开

注释标签与特殊字符

HTML中注释以\<!-- 这是注释，它不会显示到网页中 -->，VSCode中可用快捷键Ctrl + /快速注释

表格标签

<table>
    <tr>
        <td>单元格内的文字</td>
    ...
    </tr>
    ...
</table>
  1. <table></table>用于定义表格的标签
  2. <tr></tr>用于定义表格中的行，必须在table标签内
  3. <td></td>用于定义表格中的单元格，必须在tr标签内
    表格默认不显示表格线，因此，可用table表格布局网页文字内容等元素，实际效果简洁明了的同时，在代码中同样方便阅读

属性

属性属性值说明
alignleft、center、right表格相对周围元素的对齐方式
border1或""是否有边框，默认为""，表示无边框
cellpadding像素单元边沿与其内容之间的空白，默认1
cellspacing像素单元格之间的空白，默认2
width像素或百分比表格的宽度
height像素或百分比表格的高度
均不是重点，但单词要记住，因为都用CSS来定义

表格结构标签

表格可能很长，为了更好的表示表格的语义，于是便有了这玩意
<thead>表格的头部区域，<tbody>表格的主体区域，这样可以更好的分清表格结构

列表标签

无序列表

ul标签内仅能放li标签，li标签内可放任何标签

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>    
<ul>

有序列表

ol标签内仅能放li标签，li标签内可放任何标签

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>    
<ol>

自定义列表

dl标签内仅能放dt、dd标签，两标签内可放任何标签

<dl>
    <dt>标题</dt>
    <dd>列表1</dd>
    <d>列表2</dd>
    <dd>列表3</dd>    
<dl>

表单Form

一个完整的表单通常由表单域、表单控件(又称表单元素)、提示信息三部分构成

<form action-"url地址" method="提交方式(get或post)" name="表单域名字">
各种表单元素控件
</form>`

表单控件

  1. input输入表单元素
  2. select下拉表单元素
  3. textarea文本域元素

input输入表单标签

type属性的属性值如下:

属性值说明
button定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
checkbox定义复选框
file定义输入字段和"浏览"按钮，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段。字段中的字符被掩码
radio定义单选按钮
reset定义重置按钮。重置按钮会情况跟你表单中的所有数据
submit定义提交按钮。提交按钮会把表单数据发送到服务器(即上面的URL地址)
text定义单行的输入字段，用户可在其中输入文本，默认宽度20个字符

input其它属性:

属性属性值说明
name由用户自定义定义input元素的名称
value由用户定义规定input元素的值
checkedchecked规定此input元素首次加载时应当被选中
maxlength正整数规定输入字段中的字符的最大长度
id由用户自定义相同的id用于绑定同一组单选框或多选框

label标签

为input元素定义标注，标签用于绑定一个表单元素，当点击<iabel>标签内的文本时，浏览器救护自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验，不属于表单范畴，但经常与表单标签一起使用

<label for="sex">男</label><!-- for为了xxx表单元素，即绑定的表单元素 -->
<input type="radio" name="sex" id="sex" />

select下拉表单标签

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

<option>中定义selected="selected"时，即为当前默认选中项

textare文本域标签

<textarea rows="3" cols="20">
文本内容
</textarea>

row每行的字符数，cols行数

本文作者：Arimura Sena

本文链接：https://hotaru.icu/archives/126/

版权声明：转载时须注明出处及本声明