html网页

发布时间 2023-10-12 17:57:51作者: 牵机

Web概述
Web三要素:浏览器,服务器,HTTP协议
**HTML工作原理:**HTML是部署在服务器上的文本文件,根据HTTP协议浏览器发出请求给服务器,服务器做出响应给浏览器返回一个HTML,浏览器解释执行HTML,从而显示内容
什么是HTML?
HTML是超文本标记语言(Hyper Text Markup Language),一种纯文本类型的语言,用来设计网页的标记语言,用该语言编写的文件以.html或者.htm为后缀,由浏览器解释执行,在HTML的页面上可以嵌套脚本语言编写程序段,如JavaScript

HTML标签
HTML标签通常也被称为HTML标记,HTML元素;HTML标签是由尖括号包围的关键字,比如<html>,HTML标签通常是成对出现的,比如<b></b>,标签对中的第一个标签为开始标签,第二个标签为结束标签,开始标签和结束标签也被称为开放标签和闭合标签

HTML注释:

<!–注释内容 -->

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们

HTML文档类型:
<!DOCTYPE>声明:HTML由多个不同的版本,只有完全明白页面中的使用的确切HTML版本,浏览器才能完全正确的显示HTML页面,这就是<!DOCTYPE>的意义;

<!DOCTYPE>不是HTML的标签,它为浏览器提供一项信息,即HTML是用什么版本所写的

HTML<head>标签:
定义:<head>标签用于定义文档的头部,是所有头部元素的容器,<head>中的元素可以引用脚本,指示浏览器在哪里找到样表式,提供元信息等等
文档的头部描述了文档的各种信息和属性,包括文档的标题,在web中的位置以及和其他文档的关系等,绝大多数文档的头部包含的数据都不会真正的作为内容显示给读者

以下这些标签可用在head部分:<title>,<meta>,<link>,<style>,<script>,<base>

文本元素:
**作用:**文本时网页上的重要组成部分,直接书写的文本会用浏览器默认的样式显示

**文本元素列表:**是包含在文本元素中的文本,则会被显示为元素所拥有的样式

HTML标题:
标题是通过<h1>~<h6>标签进行定义的,目的是为了能够以醒目的方式显示,<h1>定义最大标题,<h6>定义最小标题

 

HTML段落:
段落是通过<p>标签进行定义的,<p>元素提供了结构化文本的一种方式,<p>元素对中的文本会以单独的段落显示,与前后文本换行分开,添加一段额外的垂直空白距离,作为行间距

HTML列表:
列表是将具有相似特征或先后顺序的几行文字进行对齐排列,所有列表都是由列表类型和列表项组成

列表类型:

有序列表 <ol>:用于列出表面上有特定次序的一些项目,其中只能包含列表项<li>

无序列表 <ul>:用于列出页面上没有特定次序的一些项目,也只能包含具体列表项元素<li>

列表项:用来表示列表具体的内容 <li>

HTML列表嵌套:将列表元素嵌套使用,可以建多层列表
HTML分区元素:

用于元素的一些分组,常用于页面布局,块分区元素<div></div>,行内分区元素<span></span>

元素显示方式:

​ 块级元素:**默认情况下,块级元素独占一行,即元素前后都会自动换行,比如<p>,<div>

​ 行内元素:**不会换行,与其他行内元素位于同一行

​ <span>元素是内联元素,可用作文本的容器,无特定的含义

​ <i>元素定义斜体字

​ <em>定义着重文字

​ <del>用来定义带删除线的文字

​ <u>用来定义带下划线的文字

​ 空格折叠:**默认情况下,HTML中的多个空格,多个换行符会压缩成单个空格,即只显示一个空格

​ 实体引用:**空格: ;(小于号)<:< (大于号 ) >:>;

HTML图像:
使用<img>元素可以将图片添加到页面

语法:<img src=“url” >

常用属性:width,height

src指的是"source",原属性的值是图像的URL地址,但是地址值分为绝对路径和相对路径

绝对路径:文件从最高级目录下开始的完整路径,无论当前路径是什么,使用绝对路径后总能找到要连接的文件

相对路径:文件的位置是相对于当前的文件位置,包括目录名或指向一个可以从当前目录出发找到的文件

HTML超链接:<a href =“url”,target=“”>
href属性:链接地址URL target属性:目标的打开方式

**锚点:**文档中某行的一个记号,用于链接到文档中的某个位置

**链接锚点:**在锚点前加 # <a href =“#g1”>内容</a>

定义锚点:<a name=“g1”>内容</a>

俩者需对应使用,前后呼应

HTML表格
表格是由<table>标签来定义的,通常用来组织结构化信息,是被称作单元格的矩形框,按照从左到右,从上到下的顺序排列在一起而形成的,表格的数据保存在单元格里

​ 创建表格:**<table></table>

​ 创建行:**<tr></tr>

​ 创建列:**<td></td>

**表格常用的属性:**border 边框 width/height 宽/高

​ align 对齐方式

​ padding 边框与文字之间的距离,内边距

​ cellspacing:单元格之间的距离

​ 跨行属性:rowspan 合并行 colspan 合并列

HTML表单:
表单是用于显示收集信息并提交信息到服务器,表单是一个包含表单元素的区域

俩要素:form元素,表单控件

表单是从浏览器向服务器传输数据的手段

表单元素:

定义表单使用成对的<form>标记,表示要将此元素中所涵盖的控件中的数据传入到服务器

主要属性:

​ action:表单提交URL;method:数据提交方式;enctype:表单数据进行编码的方式

**表单控件:**由许多不同类型的控件,其是一种HTML元素,是信息输入项,包含

input元素(具有不同的外观):文本框,密码框,单选框,按钮…

其他元素:标签,文本域,下拉选

input元素

​ 文本框 <input type = “text”/>

​ 密码框:<input type = “password”/>

​ 主要属性:value:由访问者自由输入任何文本

**Maxlength:**限制输入的字符数

**Readonly:**设置文本控件的只读

​ 单选框: <input type =“radio”/>

​ 复选框:<input type =“checkbox”/>

​ 属性:value:文本,当提交form时,选中单选按钮,则发送服务器

​ Name:实现分组,一组单选框或者复选框名称必须相同

​ Check:设置选中

提交按钮:<input type = "submit " value=“提交”/>传送表单数据给服务器

重置按钮:<input type = “reset” value=“重置”/>清空内容,并 设为最初默认状态

普通按钮:<input type = “button” value=“”/>执行客户端脚本

隐藏域:<input type = “hidden”/>表单中包含但不希望用户所见

文件选择框:<input type = “file”/>选择上传的文件

其他元素:

​ 标签:表单中的文本用于给控件设置显示名称

​ 语法:<label for=“控件ID”>文本</label>

​ 属性:for:设置该文本所关联的控件ID,关联后点击标签等同于点击控件

​ 文本域:多行文本框

​ 语法:<textrea></textrea>

​ 属性:cols:指定文本域的列数;rows:指定文本域的行数; readonly:该文本域只读