HTML知识

时间：2021-02-19 12:56:46 收藏：0 阅读：0

简介

结构用于对网页元素进行整理和分类，身体，HTML。
表现用于设置网页元素的板式、颜色、大小等外观样式，装饰CSS。
行为是指网页模型的定义及交互的编写，动作，JavaScript。

结构标签(骨架标签)

每个网页都有一个基本的结构标签
HTML标签
- 根标签，所有html语言都在其内部
```
<html></html>
```
网页头部
- 在头部中一定要设置标题title
```
<head></head>
```
网页标题
- 当前网页的名字
```
<title></title>
```
网页主体
- 页面中的内容都在主体中
```
<body></body>
```
范例

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    页面内容
</body>
</html>

<!DOCTYPE>

文档类型声明标签
告诉浏览器使用哪个版本的HTML来显示网页
使用HTML5版本来显示网页
```
<!DOCTYPE html>
```

lang

定义当前文档显示的语言
若需要使用浏览器翻译当前网页，则需要用到
en为英语
zh-CN为中文

<html lang="en">

charset

规定HTML文档使用的字符编码
UTF-8为万国码，基本包含了所有国家的字符
若不设置编码格式，可能会出现乱码
写在title标签中

<title>
  <meta charset="UTF-8">
</title>

标题标签

共有6级，h1~h6
一个标题单独占一行

<h1>1</h1>
<h2>2</h2>
···

段落标签

将文字分段
段落之间有间距

<p>一个段落<p>

换行标签

换行

<br />

加粗标签

将文字加粗

<strong>加粗</strong>
<b>加粗</b>

倾斜标签

将文字倾斜

<em>倾斜</em>
<i>倾斜</i>

删除线标签

文字中间有一条线

<del>删除线</del>
<s>删除线</s>

下划线标签

文字下面有一条线

<ins>下划线</ins>
<u>下划线</u>

盒子标签

div
- 独占一行，一行只能有一个div
- 大盒子
```
<div>大盒子</div>
```
span
- 一行可以有多个span
- 小盒子
```
<span>小盒子</span>
```

图像标签

用来设置HTML页面中的图像
属性
- src
  - 用于指定图像文件的路径和文件名
  - 是图像标签必须添加的属性
- alt
  - 若图像不能显示时，显示的文字
- title
  - 鼠标放到图片上时，显示的文字
- width
  - 图像的宽度
- height
  - 图像的高度
  - 高度和宽度只需要设置一个即可，另一个会根据比例进行缩放
- border
  - 图像边框的粗细
  - 边框一般通过CSS进行修改
范例

<img src="./image/1.jpg" alt="替换文本" title="提示文本" width="250" height="250" border="3" />

路径

目录文件夹
- 就是存放所有文件的最外面那个文件夹，即项目文件夹
根目录
- 打开目录文件夹的第一层就是根目录
绝对路径
- D:\image\a.jpg
- https://www.phd99.com/images/a.jpg
相对路径
- 当前文件夹中的image文件夹下的a图片
  - image/a.jpg
  - 或者./image/a.jpg
- 当前文件夹的上一级文件夹中的image文件夹
  - ../image

超链接标签

从一个页面跳转到另一个页面
属性
- herf指定要跳转的页面的url地址
  - 当值为#时，为空链接
- target指定如何打开跳转页面
  - _self在当前窗口打开，默认
  - _blank在新窗口中打开
- 范例
```
<a href="https://www.phd99.com" target="_parent">新页面</a>
```
锚点链接
- 点击时可以直接定位到页面中的某个位置
```
<a href="#phd">跳转到id属性值为phd的标签处</a>
```

注释标签

快捷键ctrl + /

<!-- 这是一个注释 -->

特殊字符

空格

&nbsp;

大于

&lt;

小于

&gt;

&amp;

人民币

&yen;

版权

&copy;

注册商标

&reg;

摄氏度

&deg;

正负号

&plusmn;

乘号

&times;

除号

&divide;

平方

&sup2;

立方

&sup3;

表格标签

table用于定义表格
tr用于定义一行
td用于定义一行中的一列
th表头单元格，里面的单元格会加粗居中显示，一般用于表格的第一行
属性
- align，对齐方式
- border，设置表格是否有边框
- cellpadding，文字和单元格边框之间的距离
- cellspacing，单元格之间的距离
- width，表格的宽度

<table align="center" border="1" width="200" cellpadding="1" cellspacing="1">
    <tr>
        <th>第1行第1列</th>
        <th>第1行第2列</th>
    </tr>
    <tr>
        <td>第2行第1列</td>
        <td>第2行第2列</td>
    </tr>
</table>

表格头部标签

<thead>
表头区域，表头部分

表格主题标签

<tbody>
主体区域，表格的内容部分

<table align="center" border="1" width="200" cellpadding="1" cellspacing="1">
    <thead>
        <tr>
            <th>第1行第1列</th>
            <th>第1行第2列</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第2行第1列</td>
            <td>第2行第2列</td>
        </tr>
    </tbody>
</table>

列表标签

无序列表

无顺序
用<ul>表示无序列表，<ul>标签中只能有<li>标签
用<li>表示列表中的一项，<li>标签中放其他标签

<ul>
     <li>啊啊</li>
     <li>嗯嗯</li>
     <li>嘿嘿</li>
</ul>

有序列表

有顺序
用<ol>表示有序列表，<ol>标签中只能有<li>标签
用<li>表示列表中的一项

<ol>
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
 </ol>

自定义列表

对列表中的信息有一个整体的描述
用<dl>表示自定义列表，<dl>标签中只能有<dt>和<dd>标签
用<dt>表示最上面的描述标题
用<dd>表示描述标题下面的每一个小标题

<dl>
    <dt>服务支持</dt>
    <dd>售后政策</dd>
    <dd>自助服务</dd>
    <dd>相关下载</dd>
</dl>

表单标签

表单域

<form>
属性
- action用于指定接收并处理表单数据的服务器程序的url地址
- method用于设置表单数据的提交方式，其取值为get或post
- name用于指定表单的名称，以区分同一个页面中的不同表单域

表单元素

input

输入表单元素
type属性值
- button按钮
- checkbox复选框，要有相同的name属性值
- file定义输入字段和“浏览”按钮，供文件上传
- hidden定义隐藏的输入字段
- image定义图像形式的提交按钮
- password定义密码字段
- radio定义单选按钮,要有相同的name属性值
- reset定义重置按钮，会清除表单中的所有数据
- submit定义提交按钮，提交按钮会把表单数据发送到服务器
- text定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
checked属性值
- 单选按钮和复选框可以设置checked属性，当页面打开的时候可以默认选中这个按钮
- checked="checked"
maxlength属性值
- 规定输入字段中的字符的最大长度

<form action="test.php" method="post" name="1">
    <input type="text" maxlength="10"><br>
    男<input type="radio" name="sex" value="男" checked="checked">
    女<input type="radio" name="sex" value="女">
</form>

select

下拉表单元素
<option>标签用来表示下拉列表中的选项
selected属性设置默认选择

<form>
    <select>
        <option>学生</option>
        <option>警察</option>
        <option>医生</option>
        <option selected="selected">教师</option>
    </select>
</form>

textarea

文本域元素
可以输入多行文字
常见于留言板、评论
属性
- cols一行显示的字符数
- rows显示的行数

<form>
    <textarea cols="10" rows="2">
        内容
    </textarea>
</form>

标注标签

<label>
当点击label标签对应的位置时，其完成的功能就是与for属性值相同的id属性值对应的其他标签所完成的功能。
鼠标点击“男”的位置，也能实现单选功能

<form action="test.php" method="post" name="1">
    <label for="nan">男</label>
    <input id="nan" type="radio" name="sex" value="男" checked="checked">
    <label for="nu">女</label>
    <input id="nu" type="radio" name="sex" value="女">
</form>