html 基础学习笔记

Date:20231212

html标签基础学习笔记

一、web和internet

1.1、Internet简介

Internet 是一个全球性的计算机互联网络，中文名称有"因特网"、“国际互联网”、“网际网”、"交互网络"等
Internet提供的主要服务
- Telnet、Email、www、BBS、FTP等
基本实现技术
- 分组交换原理：信息在Internet上被分成许多小数据包(分组)进行传输，到达目的地后将数据包重组为信息
- TCP/IP协议簇
Web与Internet的关系
- Web是运行在Internet之上最流行的应用之一，Internet为Web提供了网络环境
- Web的出现，极大的推动了Internet的普及与推广

1.2、Web简介

又称为万维网或环球网，即 WWW (World Wide Web)
把各种类型的信息和服务无缝连接，提供生动的图形用户界面（可以称之为文档）
万维网其实就是无数文档的集合，这些文档驻留在因特网的某些地方

1.3、web的工作原理

Web 是基于Internet 的一个多媒体信息服务系统
- 基于浏览器/服务器模式
- 由Web服务器、浏览器(Browser)和通信协议三部分组成
- 通信协议采用的是HTTP协议：超文本传输协议(Hypertext Transfer Protocol)
在Web服务器上，主要以网页的形式来发布多媒体信息、
- 网页采用超文本标记语言HTML(Hyper Text Markup Language)编写
浏览器软件连接到Web服务器并获取网页
- 浏览器解释HTML网页文档，并显示在用户的屏幕上

1.4、Web服务器

主要功能
- 存储Web上的内容信息（如:Web页文件），提供管理环境
- 响应浏览器的请求，执行服务端程序
- 安全功能等
主要web服务器产品
- TOMCAT
- IIS
- APACHE

1.5、服务端技术

运行于服务端
大多提供了数据库访问的能力
- PHP
- JSP
- ASP
- Node

1.6、客户端技术

运行于客户端，由浏览器来解释运行
- HTML
- CSS
- JavaScript

二、HTML

2.1、超文本

Web是一个超文本文件的集合
超文本文件时web的基本组成单元，也称为网页或HTML文档，web页等，通常以.html或htm为后缀的文件
Web页之间通过超文本中的超级链接组织在一起

2.2、什么是HTML

HTML(HyperText Markup Lanuage)：超文本标记语言，一种纯文本类型的语言
- 使用带有尖括号的"标记"将网页中的内容逐一标识出来
用来设计网页的标记语言
用该语言编写的文件，以.html或htm为后缀
由浏览器解释执行
HTML页面上，可以嵌套用脚本语言编写的程序段，如VBScript、JavaScript

2.3、标记语法

HTML 用于描述功能的符号称为"标记"，比如p、h1等
- 标记在使用时必须使用尖括号括起来
- 有封闭类型标记，又有非封闭类型的标记
封闭类型标记，也叫双标记，必须成对出现
- <标记>内容</标记>
非封闭类型标记，也叫空标记，或者单标记
- <标记/>
- 或者
- <标记>
- 不能包含内容

2.4、元素

元素，即标记
每一对尖括号包围的部分
- 如 <body></body>包围的元素就叫做body元素
- 元素就像是小标签，用于标识网页文档的不同部分

2.5、元素嵌套

元素之间可以相互嵌套，形成更为复杂的语法
在嵌套元素时需要注意标记的嵌套顺序
案例
```
<body>
  <p>段落1</p>
</body>
```

2.6、属性和值

属性用来修饰元素
- 属性的声明必须位于开始标记里
- 一个元素的属性可能不止一个，多个属性之间用空格隔开
- 多个属性之间不区分先后顺序
每个属性都有值
- 属性和属性的值之间用等号连接
- 属性的值包含在引号中，或单引号、不写引号都可以

<p align="center">段落一</p>

标准属性
- 每个元素都有自己所特有的属性
- 有些属性是绝大多数元素都支持的属性，称为标准属性(或通用属性)
  - id
  - title
  - class
  - style

2.7、注释

为代码添加适当的注释是一种良好的编码习惯
注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示
添加注释的语法：
- 之间的任何内容都不会显示在浏览器中
- 注释不可以嵌套在其他注释中
- 注释不可以位于嵌在<>中

2.8、文档结构

<!-- 网页的头部，页面的全局信息 -->
<!DOCTYPE html>
<html>
	<head>
	    <!-- 页面的标题 -->
	    <title></title>
		<!-- 页面的元数据(形容页面的东西) -->
		<meta charset="utf-8">
		<!-- 跟搜索排名有关 -->
		<meta name="" content="">
		<!-- 引入js文件 -->
		<script></script>
		<!-- 元素内部样式 -->
		<style></style>
		<!-- 引入css文件 -->
		<link/>
	</head>
	<!-- 网页的主体，页面展示的内容 -->
	<body>
	</body>
</html>

三、元素标签 `<xxx>`

3.1、头部标签/元素

<head> 元素用于为页面定义全局信息
- 所有其他头元素的容器
- 紧跟在起始标签<html>之后
- 可包含 <title>、<meta>、<script>、<style>、<link>
<title> 用于为文档定义标题
- 标题元素的内容出现在浏览器顶部
- 没有属性
- 必须出现在<head>元素中
- 一个文档只能有一个标题元素
<meta> 用于定义网页的基本信息
- 元数据元素
- 为空标题
- 常用属性有：content http-equiv

3.2、`<body>` 主体内容

<body>元素出现在<head>元素之后，包含网页要显示给读者的内容，称为主题内容
可以包含除了html、head外的所有元素
body的专有属性: bgcolor text

案例

  <!-- 背景颜色 -->      <!--字体颜色  -->    
<body bgcolor="#000000"  text="yellow">
	我的第一个网页
</body>

3.3、文本标记

文本是网页上的重要组成部分
直接书写的文本会用浏览器默认的样本显示
包含在标记中的文本则会被显示为标记所拥有的样式
- 标题元素
- 段落元素
- 换行元素
- 分区元素
- 特殊字符
- 注释

3.3.1、标题元素 `<hn>`

标题元素让文字以醒目的方式显示,往往用于文章的标题
基本语法<h#>..</h#>
- #=1,2,3,4,5,6
- 从h1到h6,即标题1-标题6

3.3.2、段落元素 `<p>`

p元素提供了结构化文本的一种方式
p元素的文本会用单独的段落显示
- 与前后的文本都换行分开
- 添加一段额外的垂直空白距离,作为段落间距
- 常用属性:align

3.3.3、换行元素 `<br>`

使用br元素在任何地方创建手动换行
- 空标记

3.3.4、分割线元素 `<hr>`

hr元素用于在页面上创建一条水平线
- 空标记
- 常用于将页面的不同部分隔开
- hr后面的文本将出现在新段落中
常用属性
- size
- width
- align
- color

案例

<hr color="red" width="50%" size="10px" align="right"></hr>

3.3.5、预格式化元素 `<pre>`

保留源文档中的格式,即保留原来的换行和文本中的空白
把源码中的格式保留到页面当中

3.3.6、特殊字符

空格折叠
- 多个空格或制表符压缩成单个空格,即只显示一个空格
特殊字符(如空格),需要进行转义(使用字符实体)
-   代表一个空格
- © 版权©
- ® 注册商标 ®
- &It; 小于＜
- > 大于 >
- ¥ ￥
- × ×

3.3.7、文本样式标签

文本样式的作用是对文本进行修饰,如加粗,倾斜等
- 加粗: <b>..</b>,<strong>..</strong>
- 倾斜: <i>..</i>,<em>..</em>
- 下划线: <u>..</u>
- 删除线: <s>..</s>,<del>..</del>
- 上标: <sup>..</sup>
- 下标: <sub>..</sub>

3.4、分区元素
和

分区元素用于为元素分组,常用于页面布局
块分区元素: <div></div>
行内分区元素: <span></span>
- 设置同一行文字内的不同格式

案例

<span style="color:red">hello!</span>world

3.5、行内元素与块级元素（重要）

块级元素
- 默认情况下,块级元素会独占一行,即元素前后都会自动换行
- 如 p,div,hn
行内元素
- 不会换行,可以和其他行内元素位于同一行
- 如 span,b,i,u

3.6、web目录结构

目录就是web站点中文件夹的名称
- 包含多个目录
- 每个目录包含站点的不同部分
web站点的主目录,称为web站点的根目录
- 位于根目录下的其他文件夹,称为子目录
- 每个子目录下都会包含具体功能的下一级子目录

3.7、URL 统一资源定位器

URL(Uniform Resource Locator): 统一资源定位器,用来标识网络中的任何资源
- 文本,图片,音视频文件,段落,或其他超文本
即路径,指从当前位置到目标位置所经过的路线
路径在Web页面主要有三种形式
- 绝对路径
  - 指的是文件从最高级目录下开始的完整的路径,无论当前路径是什么,使用绝对路径总是能找到要链接的文件
  - 即完整的URL组成
    - 协议,主机名,目录路径,文件名
- 相对路径
  - 指文件的位置是当对于当前文件的位置,它包括目录名,或指向一个可以从当前目录触发找到该文件的路径
- 根相对路径
  - src="d:/0.9.png" 项目中禁止用根目录方式获取图片资源,因为d盘是服务器的d盘,浏览器访问不到d盘

3.8、`<img>` 图片标签

<img>或者<img/>
专有属性：
- src=url 图片资源
- alt 当图片加载失败时，显示的文本

3.9、`<a>` 超链接标签

属性

href 没有href就是一个文本

target指定打开连接的方式

取值：默认缺省_self   在本页面打开
           _blank  在新页面打开

作用
- 跳转网页或网站 <a href="http://www.baidu.com">baidu</a>
- 跳转锚点
  - 锚点,就是页面上的一个记号，点击a标签之后会跳转到记号的位置
  - 在某位置下记号
```
h4方式   <a name=“锚点名称”></a>
h5 方式  任意标签<any id=“锚点名称”></any>
```
  - 跳转到本页锚点 <a href="#锚点名称">火影忍者</a>
  - 跳转到其他页面的锚点 <a href="**.htm#锚点名称">火影忍者</a>
- 下载 <a href="" download="01.png">下载</a>
- 返回顶部 <a href=”#”>返回顶部</a>
- 调用js脚本
```
<a href="javascript:alert('hello world')"></a>
<script>
   function fn(){
         
	   alert('hello world')
   }
</script>
<a href="javascript:fn()">调用js脚本</a>
```

3.10、`<table>`表格标签

3.10.1、表格的语法

快捷键: table>tr*4>td*4
表格中列,如果变宽,影响的是所有行这一列的宽度;如果变高,影响的是,当前行所有列的高度

3.10.2、table的属性

width=“400px” 宽度
height=“400px” 高度
border=“2px” 边框
bordercolor=“red” 边框颜色
bgcolor=“orange” 背景颜色
align=“center” 水平对齐方式
cellpadding=“50px” 单元格内边距(边框到内容之间的距离)
cellspacing=“50px” 单元格的外边距

3.10.3、tr属性

align=“right” 这一行内容的水平对齐方式 left/center/right
valign=“middle” 这一行内容的垂直对齐方式 top/middle/bottom
bgcolor=“yellow” 这一行的背景

3.10.4、td属性

width=“200px” 宽度
height=“200px” 高度
bgcolor=“purple” 背景色
align=“left” 这一列内容的水平对齐方式
valign=“bottom” 这一列内容的垂直对齐方式
colspan 跨列合并
rowspan 跨行合并

3.10.5、不规则的表格

跨列

colspan 从指定的单元格位置位置处开始,横向向右合并n个单元格(n包含自己),然后把被合并的单元格删除掉.
跨行

rowspan 从指定的单元格位置处开始,纵向向下合并n个单元格(n包含自己),然后把被合并的单元格删除掉

3.10.6、可选标题 `caption`

表格的标题 <caption>我是标题</caption>
必须紧紧跟着table的开始标签

案例

<table width="200px" height="200px" border="2px">
   <!-- 唯一的,可不写 -->
   <caption>我是标题</caption>
   <tr>
   ....
   </tr>
   ....
</table>

3.10.7、表格的复杂应用

表头<th>..</th>
- 特点: 加粗,居中
- th替代td,所有的td的属性,th都可以使用
行分组
- 可以将连续的几行,划分到一个组上,进行统一的管理
- 表头 <thead></thead>
- 表主体 <tbody></tbody>
- 表脚 <tfoot></tfoot>
- 行分组不见,如果源码没有行分组,浏览器渲染时,自动添加tbody
表格的嵌套
- 表格中所有的嵌套,都要放在td中

3.11、`<ul>` `<li>` `<dl>` `<ol>` 列表标签

列表的作用
- 有条理的显示数据
- 传统项目,无序列列表多由于布局
列表类型
- 有序列表 <ol>...</ol>
- 无序列表 <ul>...</ul>
- 列表项 <li>..</li>
列表的属性
- 有序列表的属性
  - start=“4” 指定编号的起始位置
  - type=“I” 指定编号的类型
```
默认 1    数字
    A/a  英文字母
    i/I  罗马数字
```
- 无语列表的属性
  - type=“none”
```
默认值 disc
circle 空心圆
square 实心方块
none 没有标识
```
列表的嵌套
- 所有的嵌套都必须放在li内部，语义要求。
- 列表嵌套列表,被嵌套的列表,也必须放在li中
h5–定义列表
- 定义列表常用于给出一类事物或对明词的解释说明
```
<dl>
  <dt>JavaScript</dt>
  <dd>它是一种解释性语言</dd>
</dl>
```

3.12、`<input>` 表单标签

3.12.1、作用

提供可视化的输入控件
用户输入的内容，被表单自动收集整理，并且提交给服务器

注意 :表单没有接受响应的能力,所以可以使用js的dom操作收集页面的信息,再使用ajax发送请求和接受响应,但是ajax不能自动的收集整理数据。而且使用ajax就无法使用form表单自动收集提交数据的功能。

3.12.2、表单 `<form></form>`

<form></form> 在页面上不可见，可以自动收集整理数据提交到服务器

属性

action=“” 定义表单提交时发送的动作（接口url）
method=“” 定义表达提交的方式

enctype=“”指定表单数据的编码方式，设置允许将什么样的数据提交给服务器

取值：1. application/x-www-form-urlencoded默认值,允许将任何字符提交给服务器(文件除外)
     2. text/plain 允许提交普通字符（不包括特殊字符）
     3. mulitipart/form-data传递文件

在form标签中，能够与用户进行交互的可视化元素
<input type=""> 所有input元素都是行内块
在页面中提供各种各样的输入控件
input分类
- input元素基础9种，h5新出的10种
- textarea 多行文本域
- select+option下拉选择框
- 其他相关元素
input公用属性
- type 指定input元素的类型默认值是text
- name 为控件定义名称，提供给服务端使用（使用form，name必须写）
- value 控件的值，真正传递给服务器的值/可发送的值例外，所有的按钮的value都是设置按钮上的文本，不是提交的值。
- disable 禁用只能看不能改，也不能提交,无值属性

3.12.3、表单控件

文本框 <input type="text">

属性

maxlength允许输入的最大字符数
readonly 无值属性 只能读不能改  但是可以提交
placeholder 占位提示符，显示在控件上的提示内容

密码框 <input type="password">

属性

maxlength允许输入的最大字符数
readonly 无值属性 只能读不能改  但是可以提交
placeholder 占位提示符，显示在控件上的提示内容

按钮,所有的按钮的value都是设置按钮上显示的文本，不是提交的值。
- 提交 type=“submit”将表单中的数据，收集并整理，发送给服务器
- 重置 type=“reset”将当前的表单的内容恢复到初始化状态
- 普通按钮type=‘button’没有功能，配合oncilck事件，调用js脚本。
- 为了提高可读性，h5新出的button标签
- 同submit，可以使用事件。

单选按钮 <input type="radio">

属性
- 必须有value属性
- 必须有name属性，不然没有分组，即没有单选效果
- checked 无值属性一个元素被设置该属性，默认选中

案列


<input type="radio" name="gender" value="man" checked> 男
<input type="radio" name="gender" value="man"> 女
<input type="radio" name="gender" value="man"> 无法确定
<!-- 没有name,一不能提交,二不能分组-->
 <!--value是提交的值,不加,提交的值会显示on -->

多选按钮 <input type="checkbox">

属性
- 必须有value
- name 用于分组
- checked 无值属性，默认选中

案例


<form action="" method="get">
   <button>提交</button>
   <input type="checkbox" name="hobby" value="eat">吃
   <input type="checkbox" name="hobby" value="drink">喝
   <input type="checkbox" name="hobby" value="play">玩
   <input type="checkbox" name="hobby" value="happy">乐
</form>
<!-- 没有name,一不能提交,二不能分组-->
 <!--value是提交的值,不加,提交的值会显示on -->
 
 <!--form表单自动提交,get请求,参数自动拼接在地址栏-->
<!-- http://xxxx/02.html?hobby=eat&hobby=drink&... -->

隐藏文本域 <input type="hidden">
- 想把数据提交给服务器，但是又不想展示给用户看
文本选择块<input type="file">
- 使用文件选择框的前提
  - form的method必须是post，没有大小限制
  - enctype=‘mulitipart/form-data’，才能上传文件
  - 如果想要上传多个文件，multiple无值属性，设置多选
多行文本域 `
- 把文本域看作一个大的文本域,允许录入多行文本
- cols=“5” rows=“3” 设置文本域大小,但是计算机的内核和算法不同会导致值不准备
下拉选择框 <select name=""><option>...</option>...</select>
- select 的属性：
  - size：默认值为1，1的时候显示形式是下拉选，而>1是滚动选择框
  - multiple:无值属性，设置多选
- option属性：
  - selected 无值属性默认选中
- option没有定义value，那么select提交的value是选中的option的内容
- option有value，那么select提交的value，是选中option的value

表单控件其他元素

<label>标签
- 可以使用label替代form表单中span标签
- 文本和表单控件的关联
- 案例
```
<input id="auto" type="checkbox">
<label for="auto">请点我</label>
```

为控件分组 <fieldset>

<fieldset> <!-- 为控件分组-->
   <legend></legend> <!-- 分组标题-->
</fieldset>

<fieldset>  
   <legend>用户的基本信息</legend> 
   用户姓名: <input type="text" name="uname"><br>
   用户密码: <input type="password" name="upwd"><br>
   <input id="man" type="checkbox" naem="gender" value="man">
   <label for="man">男</label>
   <input id="woman" type="checkbox" naem="gender" value="woman">
   <label for="woman">女</label>
</fieldset>