介绍

HTML是一种超文本标记语言，后缀为.html 标记语言是一套标记标签，即由尖括号围成的关键字，包括双标签与单标签 ## DOCTYPE声明 doctype是document type的缩写，H5的声明，位于文档最前端，标签之前，是网页必备的组成部分

<!DOCTYPE html>

# 基本骨架 ## html标签限定了文档的开始与结束点，其他元素要包裹在里面

<!DOCTYPE html>
<html>
</html>

## head标签定义文档头部，文档头部描述了文档的各种属性信息，包括标题、位置等，这部分内容一般不会显示给读者

<!DOCTYPE html>
<html>
    <head>
        
    </head>
</html>

## body标签定义文档主体，包含文档所有内容，会在页面显示出来

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        11
    </body>
</html>

## title标签 - 定义文档标题 - 会显示在浏览器状态栏上 - <title>标签是<head>标签中唯一必须要求包含的东西 - 有利于SEO优化：搜索引擎优化，满足搜索引擎的排名需求

<head>
    <title>My page</title>
</head>

## meta标签描述HTML网页的属性、关键词等

meta标记是单个标记，位于文档头部，属性定义了与文档相关联的名称/值对

name：描述网页，是名称/值对中的名称
content：name属性的值所描述的内容通过该属性表示
http-equiv：提供HTTP协议的相应头报文

如<meta charset="utf-8">用于声明当前使用的编码格式

属性

HTML的属性用于定义元素行为、外观、与其他元素的关系

属性名称不区分大小写，属性值对大小写敏感

适用于大部分html元素的属性

class：类属性，为html元素定义一个或多个类名
id：定义元素唯一id
style：规定元素的行内样式

标题标签

标题分类

标题通过<h1>到<h6>六类标签进行定义，1-6由大到小

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

使用h$*X快速生成h1到hX共X个标题

使用注意

确保标题标签只用于标题，而不是为了加粗加大正确使用标题有益于SEO 重要性由h1到h6依次递减

位置设置

在标签中添加属性align="left|center|right"修改，默认居左属性的位置位于左侧标签的尖括号内部

<h1 align="center">一级标题</h1>
<h2 align="right">二级标题</h2>

段落

段落通过<p>标签定义使用段落的意义在于利于对文字的样式和结构进行更改，不推荐将文本直接放在外面

<body>
    <P>paragraph</P>
</body>

# 换行不同<p>标签间会自动换行如果不希望在不产生一个新段落的情况下进行换行，可以使用<br> 该标签是一种单标签，习惯使用<br />表示结束

<body>
    <P>paragraph</P>
    <p>en<br>ter</p>
    
</body>

水平线

使用<hr>在html中创建水平线，它也是一种单标签，有以下属性可以修改 - color：设置颜色 - width：设置长度 - size：设置宽度 - align：设置对齐方式，可以选择left|right等,默认的情况是center

<hr color="green" width="150">

图片

使用<img>标签定义HTML中的图像，这是一个单标签 ## 属性图片的属性如下： - src：路径，使用图片名字与地址 - alt：规定图像的替代文本（即图片无法显示时的替换文字） - width：规定图像宽度(px) - height：规定图像高度(px) 两者若只指定一个，则按比例放大 - title：鼠标悬停文本显示 ## 图片路径 ### 绝对路径电脑文件存储的详细位置，从盘符开始

<img src="/home/tiny/CS/HTML/1.webp">

相对路径

按资源与源文件两者的相对关系，若在同一路径下可以直接用文件名访问 - 子级关系：/ - 父级关系：../ - 同级关系：./ （可以省略）可以理解为 .往外跳一级，/往里跳一级例：将图片保存在同级的文件夹image下

<img src="./image/1.webp>

网络路径

即网络上的图片地址url

超文本链接

使用<a>设置超文本链接，可以通过点击内容跳转到指定链接或文档其他位置 ## 属性 - herf：描述链接地址（包括url，邮箱，文本中的的位置等） - target：设置超链接的跳转方式： - _blank：从新标签页中跳转 - _self：在当前窗口跳转（缺省） - _parent：在父框架或父窗口中跳转 - _top：在顶层窗口或顶层框架中跳转

默认情况下，链接以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时，链接显示为红色并带有下划线

使用CSS可以修改效果

<body>
    <a href="https://cn.bing.com" target="_blank">必应</a>
    <a href="./image/1.webp">图片</a>
    <a href="#">空链接</a>
</body>

## 表现若将鼠标指针移动到网页中的某个链接上时，箭头会变为一个手

文本标签

<em>：着重文字
<b>：粗体文字
<i>：斜体字
<strong>：加重语气
<del>：删除线
<u>：下划线
<span>：无特定含义，用于配合CSS使用 注意：文本标签一般表示文本词汇，段落代表一段文本

列表

有序列表

有序列表是一列项目，使用数字进行标记，始于<ol>，每个列表项始于<li> 有序列表自动在前面添加数字标记

<body>
    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
</body>

type属性

<ol>的属性type有以下选项：

1 表示列表项目用数字标号
a 表示列表项目用小写字母标号
A 表示列表项目用大写字母标号
i 表示列表项目用小写罗马数字标号
I 表示列表项目用大写罗马数字标号

start属性

定义有序列表的起始编号，默认值为1，若设置为非1时，项前编号的起始位置会改变

如start=5，表示从第五个开始编号

有序列表的嵌套

<body>
    <ol type="I">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li><ol type="A">
            <li>1</li>
            <li>2</li>
        </ol></li>
    </ol>
</body>

无序列表

无序列表是一个项目的列表，使用粗体圆点进行标记无序列表始于<ul>标签，每个列表项目始于<li>标签

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

### type属性 - disc 默认实心圆 - circle 空心圆 - square 方块 - none 不显示

无序列表的嵌套

<ul type="square">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li><ul type="none">
        <li>xxx</li>
        <li>yyy</li>
        <li>zzz</li>
    </ul></li>
</ul>

快速生成

快速生成ul+li的布局： ul>li*X,X为需要的li的数量

定义列表

定义列表由<dl>定义，与<dt> <dd>一起使用

其中<dt>用来表示定义的术语或名称，<dd>用来表示描述该术语或名称的文字

<dl>
  <dt>计算机</dt>
  <dd>用来计算的仪器 ... ...</dd>
  <dt>显示器</dt>
  <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

表格

可以生成按行按列生成等宽等高的单元格表格标签：<table>, 表头：<th> 行：<tr>，列：<td>

<body>
    <table>
        <tr>
          <th>列标题1</th>
          <th>列标题2</th>
          <th>列标题3</th>
        </tr>
        <tr>    
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
</body>

快速生成

table>tr*x>td*y{文本信息} x,y分别是行数和列数

表格属性

border：设置边框
width：设置宽度
height：设置高度单位为像素，放在table之后后期一般使用CSS替换

单元格合并

通过在td属性修改，默认向下向右合并，即保留左边和上面 - 水平合并：colspan - 垂直合并：rowspan

属性后面跟着的数字是合并的格子数，合并后可以把被合并的语句删除

div

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分，常用于组合块级元素

本身没有任何语义，仅用于组织内容，可以创建页面组织结构

可以添加类属性和id属性来给每一块起名区分

快捷创建：.+类名，#+id

<body>
  <div class="navi">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
    <a href="#">链接4</a>

  </div>
  <div class="content">
    <p>111</p>
    <a href="#">222</a>
  </div>
</body>

span

span标签是没有特殊元素的a与img标签

主要作用是把小范围内容包装起来，以便用CSS进行组织

<span>span标签1</span>
<span><a herf="#">span超链接</a></span>

Form表单

表单是在Web网页来给用户填写信息的，所有用户输入的地方都用表单来写

表单由容器和控件组成，一般包含用户的输入框和按钮等，这些称为控件，容器可以容纳各种控件

表单属性

<form action="url" method="get" name="test"></form>

action：服务器地址
name：表单名称
method：分别有get/post两种方式

表单元素

一个完整表单包含三个基本组成部分：表单标签、表单域、表单按钮

其中最重要的是<input>元素，常用属性如下：

type：设置input元素的类型
name：设置元素的组别
placehoder：设置没有输入时默认显示的文本（灰色文本）
value：规定input的值（缺省值）

除了这个还有<select>（下拉列表）、<option>（待选择的选项）、<textarea>（文本域）、<button>（按钮）等元素

<label>用于给input标签设置标记的标签

for：用于将label绑定到input元素，一般与input中的id对应

<body>
  <form action="url" method="get" name="test">
    <input type="text">
    <input type="submit">
    <input type="button">
  </form>
</body>

下面介绍三种常用的

文本框

通过<input type="text">设定，输入内容时需要

<body>
  <form action="url" method="get" name="test">
    name: <input type="text" name="username">
  </form>
</body>

密码框

通过<input type="password">设定，输入后的内容不可见

<body>
  <form action="url" method="get" name="test">
    name: <input type="text" name="username">
    <br>
    password: <input type="password" name="userpassword">
  </form>
</body>

单选/复选框

<input type="radio">创建单选框，<input type="checkbox">创建复选框

<form action="">
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女
</form>

<form action="">
    <input type="checkbox" name="sex" value="male">男<br>
    <input type="checkbox" name="sex" value="female">女
</form>

提交按钮

当用户点击按钮时，表单的内容会被传送到另一个文件，表单的action属性定义了目的文件的文件名

<body>
  <form action="url" method="get" name="test">
    name: <input type="text" name="username">
    <br>
    password: <input type="password" name="userpassword">
    <br>
    <input type="submit" value="登录">
  </form>
</body>

域和域标题

<fieldset> 和<legend> 标签用于定义表单中的域（区域）和域标题。这些标签有助于组织和分组相关的表单元素，使表单更加清晰易读。

<fieldset>标签用于将一组相关的表单控件进行分组，通常会被浏览器渲染为一个边框，将包裹内容分开

<legend>标签用于为fieldset标签提供一个标题或描述，通常显示在fieldset的顶部，作为该组控件的说明

<body>
    <h3>教学信息反馈</h3>
    
    <form name="feedbackForm" method="post" action="">
        <fieldset>
            <legend><b>学生信息</b></legend>
            学号：<input type="text" name="studentId" maxlength="10"><br><br>
            姓名：<input type="text" name="studentName" maxlength="8"><br><br>
        </fieldset>
        
        <fieldset>
            <legend><b>课程信息</b></legend>
            课程选择：
            <select name="course">
                <option value="web" selected>Web前端开发技术</option>
                <option value="datastructure">数据结构</option>
                <option value="java">Java</option>
            </select><br><br>
            
            反馈内容：<br>
            <textarea name="feedback" rows="5" cols="40" placeholder="请输入您的反馈意见..."></textarea><br><br>
        </fieldset>
        
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>

块元素与内联元素

块级元素	内联元素
页面中独占一行（自上而下排列）	行内元素只占自身大小
可以设置宽和高等属性	行内元素设置宽高无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素包含内联元素而不包含块级元素

常见块级元素

如div、form、h1-h6、hr、p、table、ul、ol都是块级元素

他们通常从新行开始，并占据整行宽度，可以包含其他块级元素和行内元素等

<body>
  <h1>title</h1>
  <p>para</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li><p>1234</p></li>
  </ul>
</body>

常见内联元素

a、b、em、i、span、strong等都是内联元素

他们只占内容所需宽度，故多个会存在于一行内

<a href="#">超链接</a>
<em>emphasize</em>
<i>italian</i>

行内块级元素

button、img、input等是行内块级元素

他们只占自身大小，但可以设置宽高

<a href="#">超链接</a>
<em>emphasize</em>
<i>italian</i>
<input type="text" width="200" height="100">

H5新增标签

H5之前使用div+css进行布局，但这样的布局使文档结构不够清晰，也不利于SEO，故H5新增了很多语义化标签

H5新加了一些固定的分区标签，有利于区分各个区域的名称和作用，且SEO大于div

header：头部
nav：导航
section：文档中的节
aside：侧边栏
footer：底部
article：独立、完整的一个内容块