HTML

最新推荐文章于 2024-09-11 17:25:08 发布

莫问归期122

最新推荐文章于 2024-09-11 17:25:08 发布

阅读量261

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/xzz19930201/article/details/115109757

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.web基础知识

HTML：泛指前端网页技术
HTML5：大前端技术

internet

全球性计算机互联网，俗称：互联网，因特网，交互网，交际网
1.C/S结构（客户端/服务器/ex:QQ带客户端的网游）；
2.B/S结构（浏览器/服务器/ex所有的网站）
3.C/S和B/S区别（C/S需要升级，B/S不需要升级）

www服务

world wide web 万维网，访问网站就是www服务
1.internet为web运行提供了网络环境
2.运行在internet上的一种B/S结构的应用程序，俗称网站
3.基于浏览器和服务器以及通信协议（规范了数据是如何打包和传递的）来实现的数据的
传输和展示

服务器

1.功能：存储数据
接收请求，并给出响应
提供程序的运行环境
具备一定的安全功能
2.服务器产品：Tomcat/apache/IIS
3.服务器端的技术：Java/PHP/net/nodejs/python

浏览器

1.功能：发送请求
把响应解析成图形界面给用户看
作为html.css.js的解析器
2.浏览器产品：chrome/safari/firefox/opera/ie—edga
3.浏览的技术：html5/css3/javascript

二.html 简介

HTML：HyperText Markup Language超文本标记语言

特点

1.文件必须以.html或者.htm为后缀
2.由浏览器解析执行
3.有<>来标识
4.在页面中可以执行脚本语言

基本语法

(1)标记

标记，标签，元素，对象，节点

<关键字></关键字>

关键字是固定单词；标签是有功能的

(2)标记分类

双标记：有开始有结束成对出现

<标记>内容区域</标记>

单标记(空标记)：

<标记>或者<标记/>

(3)嵌套

在一对标记中出现其他标记，形成功能叠加

<a href=""><b>内容区域</b></a>

快捷写法：>代表嵌套；+代表兄弟；[]属性；{}内容；.代表class；#id

(4)属性和值对标记进行修饰

1）属性必须声明在开始标签中 <标记属性="值"></标记>
2）多个属性之间使用空格分开 <标记属性="值" 属性="值"></标记>
3）属性值可加""双引号，‘’单引号，可不加，习惯上加""双引号
4）预定义属性：别人写好的属性名和值
自定义属性：自己定义属性名和属性值
5）属性分类：通用属性，所有元素都生效的属性
（标准属性）id 元素在页面中的唯一标识
title 鼠标悬停在元素上显示文本
style css中定义内联样式
class css中引用类选择器
专有属性，只有部分元素生效的属性
注释：不被浏览器解析运行的内容：注释ctrl+/

三.html文档结构

1.文档类型声明

告诉浏览器，解析运行本篇代码，使用H5的规则解析

<!doctype html>

2.网页结构

<html></html>表示网页的开始和结束，一个html文件中只能有一对html标签
<head></head>网页的头部，定义全局信息
<body></body>网页的主体
<meta>元数据标签（用名词描述一个物体，这些名词就是这个物体的元数据）
charset="utf-8"文件保存时注意格式和charset属性一致，以免乱码

/*表示网页的开始和结束，有且只有一个*/
<html>
    /* 网页头部，定义全局信息，是其他头元素的容器 */
    <head>
        /* 元数据标签，定义网页的全局信息 */
        <meta charset="utf-8">/* 指定编码方式 */
        <meta name="description"content="描述内容">/*描述*/
        <meta name="Keywords"content="关键字">/*关键字*/
        /* 网页标题 */   
        <title></title>
        /* 编写js或引用js文件 */
        <script></script>
        /* css中定义内部样式 */
        <style></style>
        /* 引入外部css样式 */
        <link></link>
    </head>
    /* 网页主体 */
    <body bgcolor="body的背景颜色"text="body的文本颜色">
    </body>
</html>

四.基础标签

1.标题元素`<h></h>`

（1）功能：醒目的显示文字
（2）特点：字号有变化，h1最大，h6最小；字体加粗；独占一行，上下有垂直空间
（3）属性：align 设置文本的水平对齐方式，left默认向左 / center居中 / right向右

<h1 align="center">1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>

2.段落标记`<p></p>`

（1）功能：突出显示一段文本
（2）特点：单独成行;上下有垂直空间
（3）属性：align 设置文本的水平对齐方式，left默认向左 / center居中 / right向右

<p align="center">文本内容</p>

3.水平分割线`<hr>或<hr/>`

（1）功能：页面添加一条横线
（2）属性
size="50px" 粗细，以px为单位的数字；
width="50%" 长短，以px为单位的数字或者百分比%；
color="pink" 颜色，合法的颜色值；
align="left" 水平对齐方式，left向左/center默认居中/right向右；

<hr size="50px" width="50%" color="pink" align="left">

4.预格式化标签`<pre></pre>`

（1）功能：解决html自带的空格折叠现象
（2）特点：单独成行;可以把代码中的空格和回车全部保留，显示在页面上

<pre>
    <p>你好   你好
      你好
    </p>
  </pre>

5.换行标签`<br>或<br/>`

6.特殊字符

&nbsp 空格
&lt 小于号
&gt 大于号
&reg 商标注册®
&copy 版权©
&times 叉号×
&yen 人民币¥

7.文本样式标签

加粗：<strong></strong>或<b></b>
斜体：<em></em>或<i></i>
删除线：<s></s>或<del></del>
下划线：<u></u>
下标：<sub></sub>
上标：<sup></sup>

8.分区元素

（1）块分区`<div></div>`

1）功能：用来为页面做布局
2）特点：单独成行

（2）行分区`<span></span>`

1）功能：同一行文字，有不同样式，用行分区处理
2）特点：不独立成行

9.块级元素和行内元素

所有元素，在页面显示，都有默认的显示规则

（1）块级元素

1）特点：单独成行，从上往下显示
2）案例：p h1~h6 pre hr div

（2）行内元素

1）特点：与其他行内元素共用一行
2）案例：span i em b strong u s del sup sub

（3）行内块`<input>`

（4）表格显示`<table></table>`

10.图像`<img>或<img/>`

（1）URL统一资源定位符，路径

1）绝对路径——完整路径
形式：使用网络资源的时候，使用绝对路径协议+主机名称+目录结构+资源名称
优点：节省存储空间
缺点：资源不稳定
注意：本机资源项目中千万不能使用绝对路径
2）相对路径——参照物是当前.html文件
形式：a.同级兄弟元素，直接写资源名称
b.子集元素，使用/
c.父级元素，使用../

（2）img属性

src=" " 图片路径
alt=" " 图片加载失败时，显示的文本
width=" " 图片宽度，px为单位的数字
height=" " 图片高度，px为单位的数字
title=" " 鼠标悬停时显示的文本
设置的宽高和图片原始比例不一致会发生图片的失真。解决方法只设置高或者宽,另一个自动适应

<img src="./***.后缀" alt="无法显示图片时所展示的文本" width="图片宽度" height="图片高度" title="鼠标悬停时显示的文本">

11.链接`<a href=""></a>`

（1）属性

添加了href才有超链接的功能
http://www.***.com 指向要跳转的路径
***.html#锚点名称 跳转到对应的html页面
***.rar或zip 下载压缩文件
javascript:fn() 调用js代码
mailto:邮件地址 打开发送邮件的软件
# 返回页面顶部

target页面打开位置
_self 默认，在当前页面打开新页面
_blank 在新的页面打开链接

<a href="http://www.***.com" target="_self或_blank">网站</a>
<a href="./***.html#瞄点名称">页面链接</a>
<a href="./***.rar或zip">下载压缩文件</a>
<a href="javascript:fn()">执行js</a>
<a href="mailto:邮件地址">发邮件</a>
<a href="#">返回页面顶部</a>

（2）锚点

页面中的一个记号，通过a标签返回到对应位置

//定义锚点
<div id="瞄点1">内容一内容一</div>
<div id="瞄点2">内容二内容二</div>
<div id="瞄点3">内容三内容三</div>
//跳转到锚点
<a href="#瞄点1">按钮一</a>
<a href="#瞄点2">按钮二</a>
<a href="#瞄点3">按钮三</a>

<style>
    /* 链接未被访问状态 */
    a:link{color:pink;text-decoration:none;}
    /* 链接已被访问状态 */
    a:visited{color:orange;}
    /* 鼠标悬停在元素上状态 */
    a:hover{color:red;}
    /* 元素被激活状态 */
    a:active{color:blue;}
    /* 元素获取焦点状态，输入框竖线 */
    input:focus{color:yellow;}
</style>

12.表格

（1）显示规则

1）内容少，设置的宽高大，尺寸按照设置的宽高显示
2）内容多，设置的宽高小，尺寸按照内容的宽高显示
3）表格的渲染，先把表格中所有的数据读取到内存中，再一次性把表格画在页面上

（2）属性

table
border=" " 边框粗细px
bordercolor=" " 边框颜色
bgcolor=" " 背景颜色
width=" " 表格宽px
height=" " 表格高px
align=" " 水平对齐方式
cellpadding=" " 内边距,边框到内容的距离
cellspacing=" " 外边距,边框与边框的距离

tr
bgcolor=" " 背景颜色
align=" " 内部水平对齐
valign=" " 内部垂直对齐

td/th
width=" " 宽
height=" " 高
align=" " 水平对齐
valign=" " 垂直对齐
bgcolor=" " 背景颜色
colspan=" " 列合并
rowspan=" " 行合并

 <table border="1px" bordercolor="red" bgcolor="yellow" width="300px" height="300px" align="left" cellpadding="20px" cellspacing="10px">
    <caption>表格标题</caption>
    <tr>
        <th>列标题</th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr bgcolor="blue" align="right" valign="middle">
        <th rowspan="2">行标题</th>
        <td width="200px" height="200px" align="center" valign="bottom" bgcolor="yellow" colspan="2"></td>
        <td>
            <table>嵌套表格
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
</table>

注释：1）水平对齐方式：left向左 / center居中 / right向右
垂直对齐方式：top向上 / middle居中 / bottom向下
2）列合并：colspan="n" 从指定单元格位置处开始，横向向右合并n个单元格(n包括自己),被合并的单元格要删除；
行合并：rowspan="n" 从指定单元格位置开始，纵向向下合并n个单元格(n包括自己),被合并的单元格要删除。
3）嵌套表格只能在td中

（3）可选标记

1）标题<caption></caption>如果设置标题，caption必须紧跟在<table>标签后
2）行/列标题<th></th>td的属性<th>都可以用，特点是文字加粗，水平居中
3）行分组：表头<thead></thead>表格最上面的一行或者几行
表主体<tbody></tbody>表格的实际内容(没写浏览器会自动添加该标签)
表脚<tfoot></tfoot>表格最下面的一行或者几行

13.列表

（1）有序列表

<ol>
   <li></li>
   ...
</ol>
type="Ⅰ"   列表项类型 1/a/A/i/Ⅰ
start="99"  指定起始编号

（2）无序列表

<ul>
   <li></li>
   ...
</ul>
type="none"  无
         disc    默认实心圆
         circle  空心圆
         square   实心方块

（3）定义列表

<dl>
   <dt>名称</dt>
   <dd>名词解释</dd>
 </dl>
 常用于给出一类事物或者对名词的解释说明

注释：被嵌套的内容只能放在li中

//有序列表
<ol type="I" start="49">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ol>
//无序列表
<ul type="none">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
//定义列表
<dl>
    <dt>名称</dt>
    <dd>名词解释</dd>
</dl>
//列表的嵌套
<ul>
    <li>
        <img>
    </li>
</ul>

14.其他属性

1）通用属性：id：定义元素在页面中唯一标识
title：鼠标悬停在元素上显示的文本
style：css中，定义内联样式
class：css中，引用类选择器时使用

<p id="p1" title="所以我叫彭摆鱼" align="right">我出生时候，家里摆鱼宴，我姓彭</p>

2）个别属性：display:block设置成块级元素
display:inline设置成行内元素

15.其他标签

 /* 缩写形式 */
  <abbr title="People's Republic of China">PRC</abbr>
  /* 只取首字母缩写 */
  <acronym title="World Wide Web">WWW</acronym>
  /* 文本从右往左读 */
  <bdo dir="rtl">Here is some text</bdo>
  /* 定义样式 */
  <cite>引用文献</cite>
  <code>计算机代码</code>
  <dfn>定义项目</dfn>
  <kbd>键盘文本</kbd>
  <q>定义短的引用</q>
  <samp>样本文本</samp>
  /* 创建选择 */
  <select name="" id="">单选</select>
  /* 多行文本控件 */
  <textarea name="" id="" cols="8" rows="2">1234568965</textarea>
  /* 定义地址 */
  <address>定义地址</address>
  /* 框架集，可将表单中相关元素分组 */
  <fieldset>定义一个框架集</fieldset>

五.结构标记

用来描述整个网页结构，取代div做布局一套标签；使用div做布局，代码可读性非常差；使用结构标记，可以增强代码的可读性；百度搜索，结构标签比div排名高。

/*定义网页头部，或者某个区域的头部*/
<header></header>
/*定义网页脚部，或者某个区域的底部*/
<footer></footer>
/*定义网页导航部分*/
<nav></nav>
/*定义网页主体*/
<section></section>
/*定义侧边栏*/
<aside></aside>
/*定义与文本相关的内容，比如：回帖，评论*/
<article></article>

六.表单

1.简介`<form></form>`

（1）作用

1）提供可视化的输入控件
2）收集整理用户输入的数据，并提交给服务器
注意：使用Ajax，就不使用form标签
form自带收集数据的功能
Ajax需要手动收集数据（js–dom操作）

（2）组成

1）前端部分：提供表单控件，与用户交互的可视化控件
2）后端部分：后台接口对提交的数据进行处理

2.属性

action=" "
设置请求的URL；
定义表单提交时发生的动作(后台接口)；
默认提交给当前页

method=" "
设置请求提交方法，默认get；
1）get：明文提交server.get(..,function(req,res){ })
提交的内容会在地址栏显示;向服务器要数据时用get;提交的数据有大小限制上限2kb。
2）post：隐式提交server.post(..,function(req,res){ })
提交的内容不会在地址栏显示;给服务器数据时用post;提交的数据没有大小限制。
3）delete：删除服务器上数据的方法
4）put：往服务器上传递数据
5）option：预请求

enctype=" "
指定表单数据的编码方式，允许将什么样数据传递给服务器；
1）application/x-www-form-urlencoded：默认允许上传除了文件以外的所有字符
2）text/plain：允许提交普通字符（不能有= &等特殊符号）
3）multipart/form-data：允许提交文件给服务器

3.控件

form标签中，能够与用户做数据交互的可视化元素

（1）input

input:focus{color: yellow;}输入框中竖线样式

<button onclick="fn()"></button>替代<input type="submit">
//增加可读性

type=" "
button 按钮，没有功能，配合事件调用js方法
reset 重置按钮，让表单恢复到最原始状态
submit 提交，将表单中数据收集整理提交
checkbox 多选按钮
radio 单选按钮
color 弹出取色器
file 文件选择框
image 提交图片
date 年月日，提供日期选择控件
datetime
datetime-local 年月日时分
month 年月
time 时分
week 年周
number 上下按钮选择数值一起设置max最大值/min最小值/step步长
range 数值范围滑块一起设置max最大值/min最小值/step步长
text 文本框
password 密码框
search 搜索，自带快速清除的按钮
email 邮箱地址，提交时可设置验证@前后有内容
tel 电话号码，移动端使用，弹出虚拟键盘
url url地址
hidden 隐藏域，数据不想暴露给用户，但是还需要提交，使用隐藏域

name=" "
除了给元素命名以外，还起到分组的作用

value=" "
对于 “button”、“reset”、“submit” 类型 - 定义按钮上的文本；
对于 “text”、“password”、“hidden” 类型 - 定义输入字段的初始（默认）值；
对于 “checkbox”、“radio”、“image” 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL

disabled=" "
应该禁用的元素

maxlength=" "
指定输入字符的最大长度

readonly=" "
无值属性，只能读不能改，可以提交

placeholder=" "
占位提示符，提示信息

checked=" "
无值属性，默认选中

multiple=" "
无值属性，选择多个文件

accept=" "
通过文件上传来提交的文件的类型； (只针对type=“file”)
audio/* video/* image/* MIME_type

alt=" "
定义图像输入的替代文本。 (只针对type=“image”)

size=" "
以字符数计的元素的可见宽度

src=" "
显示为提交按钮的图像的 URL。 (只针对 type=“image”)

（2）多行文本域`<textarea></textarea>`

属性：cols规定文本区内的可见宽度；rows规定文本区内的可见行数。

<textarea name="txt" cols="5" rows="3"></textarea>

4.下拉选择框`select>option*n`

select
name
value
size 如果>1，变成滚动选择框
multiple 无值属性，多选

option
value
selected 无值属性，默认选中

注释：提交时，如果option没有value属性，选中的option的内容当做select的value被提交；
如果option有value属性，选中的option的value当做select的value被提交。

<select name="" value="" size="2" multiple>
  <option value="">目录一</option>
  <option value="" selected>目录二</option>
  <option value="">目录三</option>
</select>

5.其他元素

label
如果form中以后span,可用label代替span;
关联文本与表单控件;

<label for="auto"></label>

为控件分组
<fieldset></fieldset>为表单控件分组
<legend></legend>分组标题

浮动框架<iframe></iframe>
在一个html中，引入其他html页面；
src="***.html" 资源路径
frameborder="1px" 边框,0为无边框
scrolling="no" 设置滚动条yes/no
width="100%" 宽度
height="200px" 高度

<iframe src="资源路径" frameborder="像素设置边框" scrolling="yes/no设置滚动条" width="宽度" height="高度"></iframe>