您的位置: 首页  >  IT文章  >  HTML

HTML

分类: IT文章 • 2022-03-21 00:12:42

HTML

web服务本质

浏览器发请求 --> HTTP协议 --> 服务端接收请求 -->服务端返回响应 -->服务端把HTML文件内容发给浏览器-->浏览器渲染页面

HTML是什么

  • 超文本标记语言（Hypertext Markup Language , HTML）是一种用于创建网页的标记语言
  • 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
  • 网页文件的扩展名：.html 或者 .htm

HTML不是什么

  • HTML是一种标记语言，他不是一种编程语言

  • HTML使用标签来描述网页

HTML默认格式

<!DOCTYPE html>               # 声明为HTML5文档
<html lang="zh-CN">           # 是HTML文档的开始标记
<head>					    # 定义了HTML文档的头部分
  <meta charset="UTF-8">      # 对于中文网页需要声明编码格式
  <title>css样式优先级</title> # 网页的标题
</head>
<body>						# 网页的身体部分

</body>
</html>					    # 是HTML文档的结束标记

# 一些软件默认的生成的一种固定的格式

HTML标签

重要的标签

  • id : 定义标签的唯一ID，HTML文档树中唯一
  • class : 为HTML元素定义一个或者多个类名（classname）(CSS样式类名)
  • style : 规定元素上的行内样式（CSS样式）

注释方法

<!--注释内容-->

最开始标签

<!DOCTYPE> 
- 声明必须是HTML文档的第一行,位于<html>标签之前
- 声明不是HTML标签;他是指示web浏览器关于页面使用哪个HTML版本进行编写的指令

head内常用标签

<title></title> # 定义网页的标题
<style></style> # 定义内部样式表
<script></script> # 定义JS代码或引入外部JS文件
<link/> # 引入外部样式表文件或网站文件
<meta/> # 定义网页元信息
	1. <meta>元素可以提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词
	2. <meta>标签位于文档的头部,不包含任何内容
	3. <meta>提供的信息是用户不可见的
	<meta>标签的组成: <meta>标签共有两个属性,他们分别是http-equiv属性和name属性, 不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能
	1. http-equiv属性: 相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确的显示网页内容,与之对应的值为content --> content中的内容其实就是各个参数的变量值.
	<!--指定文档的编码类型-->
	<meta http-equiv='content-Type' charset='UTF8'>
	<!--2秒后跳转到对应的网址,注意引号-->
	<meta http-equiv='refresh' content='秒数;跳转后的地址'>		
	<!--告诉IE以*模式渲染文档-->
	<meta http-equiv='x-ua-compatible' content='IE=edge'>
	2. name属性:只要用户描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
	<!--规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）.(用于搜索引擎对页面进行分类)-->
	<meta name='keywords' content=''> 
	<!--规定页面的描述。搜索引擎会把这个描述显示在搜索结果中.-->
	<meta name='description' content=''> 

	注意: 如果设置了http-equiv属性,则不应该设置name属性

body内常用标签

<!--基本标签(块级标签和内联标签)-->
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

<p>段落标签</p> : 占一行

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

<br> : 换行

<hr> : 水平线

<!--特殊字符-->
&nbsp; 空格,
&gt; 大于号
&lt; 小于号
&amp; & 也就是他自己本身,
&yen; ￥ 人民币符号,
&copy; 版权符号,
&reg; 注册符号,
            
<!--div标签和span标签-->
div标签用来定义一个块级元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现
span标签用来定义内联(行内)元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现

块级元素和行内元素的区别:
所谓块元素,是以玲一行开始渲染的元素,行内元素则不需另起一行.如果单独在网页中插入这两个元素,不会对网页产生任何的影响.
这两个元素是专门定义CSS样式而生

注意:
关于标签的嵌套:一般块级元素内可以包含内联元素和某些块级元素,但是内联元素中不能包含块级元素,他只能包含其他内联元素.
p标签不能包含块级元素,p标签也不能包含p标签

<!--img标签-->
<img src='图片的路径' alt='图片未加载成功显示的提示' title='鼠标悬停时提示的信息' width='' height=''>
宽和高两个属性只有一个会等比缩放

<!--a标签-->
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件,一个文件,甚至是一个应用程序.
    <!--url-->
    url --> 统一资源定位器,也被=称为网页地址,是inter网上标准的资源的地址
    eg: http://www.chaoge.com/name/my.html

    url组成部分:
		第一部分: 协议: http://,ftp://等
		第二部分: 站点地址: 可以是域名,也可以是ip地址 www.chaoge.com
		第三部分: 网页在站点中的目录: /name/
		第四部分: 页面名称: my.html
	每个部分使用'/'隔开
		
<a href='点击之后跳转的地址' target='_blank/_self'>点击</a>
href:
	1. 可以是绝对地址
	2. 可以是相对地址
	3. 可以是锚点 (href='所指向的标签的id')
target:
	_blank: 重新打开一个页面显示网页
	_self: 就当前页面显示点击之后的页面(默认)

<!--列表-->
1. 无序列表
<ul type='属性'>
    <li>第一个</li>
	<li>第二个</li>
	<li>第三个</li>
</ul>

type属性:
	1. disc - 实心圆点(默认值)
	2. circle - 空性圆点
	3. square - 实心方块
	4. none - 啥也没有

2. 有序列表
<ol type='属性' start='从第几个开始-必须是数字'>
    <li>第一个</li>
	<li>第二个</li>
    <li>第三个</li>
</ol>

type属性:
	1. 1 - 数字列表(默认值)
	2. A - 大写字母
	3. a - 小写字母
	4. I - 大写罗马
	5. i - 小写罗马

3. 标题列表
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dt>内容2</dt>
</dl>

<!--表格-->
表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干个单元格组成,单元格可以包含文字,列表,图案,表单,数字符号,预置文本和其他的表格等内容.
表格最重要的目的是显示表格内数据,表格内数据是指最适合组织为表格格式(即按行和列组织)的数据
表格的基本结构:
<table border='表格边框' cellpadding='内边距' cellspacing='外边距'>
	<thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
</table>

boreder: 表格边框
cellpadding: 内边距
cellspacing: 外边距
 像素 百分比
rowspan: 单元格竖跨多少行
colspab: 单元格横跨多少列

实现数据交互的重点标签

<!--form表单-->
功能:
表单用于向服务器传输数据,从而实现用户与web服务器的交互.
表单能够包含input系列标签,比如文本字段,复选框,单选框,提交按钮等.
表单还可以包含textarea,select,fieldset和label标签.

属性:
accept-charset : 规定在被提交的表单中使用的字符集(默认:页面字符集)
action : 规定向何处提交表单的地址(URL)(提交页面).
autocomplete : 规定浏览器应该自动完成表单(默认:开启).
enctype : 规定被提交数据的字符编码(默认:url-encoded).如果是上传文件需要将 enctype='multipart/form-data'.
method : 规定在提交表单是所使用的HTTP方法(默认:GET).
name : 规定识别变淡名称(对于DOM使用:document.forms.name).
novalidate : 规定浏览器不验证表单.
target : 规定action属性中的地址目标(默认:_self).

表单其实就是用户才操作完表单里面的一些框,按钮之后,把所选的数据传输到服务器上面.

表单中的 input 标签

<!--input标签中的type属性-->
text : 单行输入文本
password : 密码输入框 -> 看不见输入的东西
date : 日期输入框
checkbox : 复选框
radio : 单选框 -> 基于name,多个单选框是同一个name,就可以实现单选
submit : 提交按钮
reset : 重置按钮
button : 普通按钮
hidden : 隐藏输入框
file : 文本选择框 -> 就是提交文件的


属性:
	name : 表单提交时的"键"
	value : 表单提交时的"值"
	checked : radio和checkbox默认被选中的项
	readonly : 输入框只能看不能摸
	disabled : 所有input都适用,标签被禁用了

表单中的select标签

<!--select标签这个就是一个下拉框-->

<form action="提交到哪儿去" method="提交方式GET/POST">
	<select name="city">
        <option value="北京">北京</option>
        <option value="上海" selected="selected">上海</option> # selected默认被选中的项,类似于checked
    </select>
    
</form>

属性:
	multiple : 布尔属性,设置后为多选,否则默认单选
	disabled : 禁用
	selected : 默认选中的项
	value : 提交时的值

表单中的label标签和textarea多行文本标签

<!--label标签-->
1. label标签不会向用户呈现任何特殊效果
2. <label>标签的for属性值应当与相关元素的id属性值相同

<form action="">
    	<label for="username">用户名</label>
    	<input type="text" >
</form>

<!--textarea标签-->

<textarea name="名称" rows="行数" clos="列数" disabled(禁用)></textarea>

相关推荐