前端-HTML

最新推荐文章于 2024-06-25 22:00:00 发布

宅就好了

最新推荐文章于 2024-06-25 22:00:00 发布

阅读量158

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/Wednesdayi/article/details/114211360

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>

</body>
</html>

1. <!DOCTYPE html>：声明是HTML5文档，必须在第一行
2. <html>、</html>：是文档的开始和结束的标记
3. <head>、</head>：定义HTML文档的开头部分，内容不会在浏览器文档窗口显示
4. <meta>：浏览器的设置方法，charset="UTF-8"：设置编码
5. <title>、</title>：定义网页标题，在浏览器标题栏显示
6. <body>、</body>：网页可见主体内容

3、HTML注释

注释符号：<!---->
单行注释：<!--内容-->
多行注释：<!--内容1
			 内容2-->

4、HTML标签

4.1 格式与语法

HTML标签是由尖括号包围的关键字
HTML标签有成对出现，第一个是开始，第二个是结束；也有单独出现的
标签里的可以有多个属性，也可以没有属性

成对语法：属性直接用空格空开
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

单个语法：属性直接用空格空开
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

基础属性：
id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）

4.2 标签的分类

块级标签：无论自己尺寸多大都独占一行的标签
行级标签：自己尺寸多大就占多大
块级标签：
			标题<h></h>
			有序列表<ol><li></li></ol>
			无序列表<ul><li></li></ul>
			标题列表<dl></dl>
			段落标签<p></p>
			划分区块<div></div>
			表格<table></table>
			表单<form></form>
			添加一条直线  <hr>	
行级标签：
			超链接<a></a>
			下划线<u></u>
			删除线<s></s>
			倾斜<i></i>
			加粗<b></b>
			跨越多个字符<span></span>
			获取用户输入<input>
			创建下拉列表<select>
			创建多行文本框<textarea>
			定义控件标注<lable> 
			图片<img >

4.3 标签的嵌套

1、通常块级元素可以包含内联（行内）元素或某些块级元素
2、内联（行内）元素不能包含块级元素，它只能包含其它内联（行内）元素
3、p标签不能包含块级标签，p标签也不能包含p标签。

5、head内标签

标签	意义
<title></title>	定义网页标题，head内唯一必须有的标签
<style></style>	定义内部css样式表
<link>	引入外部css样式表文件或网站图标
<script></script>	定义JS代码或者引入外部JS文件
<meta>	定义网页原信息

"""1、<link>"""
实例：<link rel="stylesheet" href="home.css" type="text/css">
属性：
rel：规定当前文档与被链接文档之间的关系。stylesheet：指向要导入的样式表的 URL。
href：规定被链接文档的位置。
type：被链接文档的 MIME 类型。

"""2、<script></script>"""
实例：<script src="home.js"></script>
属性：
scr：规定外部脚本的 URL。如果使用 "src" 属性，则 <script> 元素必须是空的。

"""3、<meta>"""
属性：
charset：定义文档的字符编码。
content：定义与 http-equiv 或 name 属性相关的元信息。
http-equiv：把 content 属性关联到 HTTP 头部。向浏览器传回一些有用的信息，以帮助正确地显示网页内容。
http-equiv的参数：
			content-type		# 规定文档的字符编码。
			refresh				# 定义文档自动刷新的时间间隔。
			x-ua-Compatible		# 以最高级模式渲染文档
实例：
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">  
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

name：把 content 属性关联到一个名称。主要用于描述网页。
name属性的参数：
			author				# 规定文档的作者的名字。
			description			# 规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。
			keywords			# 规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的）。
实例：
<meta name="keywords" content="百度, 百度一下,百度搜索">
<meta name="description" content="最屌的搜索引擎">

6、body内常用标签

6.1特殊符号

内容	代码
空格
>	>
<	<
&	&
¥	¥
©	©
®	®

6.2 基本标签

标签	含义
<b></b>	加粗
<i> </i>	斜体
<u> </u>	下划线
<s> </s>	删除线
<p> </p>	段落
<h1> </h1>	标题数字可以为1-6，1最大，6最小
<br>	换行
<hr>	水平线

6.3 常用标签

标签	含义
<div> </div>	定义块级元素，通常用来对整个页面进行划分区域占位
<span> </span>	定义行内元素，通常用来对行内进行划分区域占位
<img>	图片链接
<a> </a>	超链接标签

1、<img>
实例
<img src="np.png" alt="最牛B的图片" title="最牛B的图片" width="500px" height="">
属性：
src：图片的路径
alt：图片未加载成功时的提示
title：鼠标悬浮时提示信息
width：指定图片的宽，单位px（像素） 
height：指定图片的高，单位px（像素）
宽高两个属性只用一个会自动等比缩放

2、<a> </a>
实例：
<a href="https://www.baidu.com" target="_blank">点我</a>
属性：
href：目标地址
	绝对URL - 指向另一个站点（href="http://www.baidu.com）
	相对URL - 指当前站点中确切的路径（href="index.htm"）
	锚URL   - 指向页面中的锚（href="#top"）

target：打开方式
	_blank -  表示在新标签页中打开目标网页
	_self  -  表示在当前标签页中打开目标网页

6.4 列表标签

1、无序列表
<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

属性：
type：样式
	disc：实心圆点，默认值
	circle：空心圆圈
	square：实心方块
	none：无样式

2、有序列表
<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

属性：
type：样式
	1：数字列表，默认值
	A：大写字母
	a：小写字母
	Ⅰ：大写罗马
	ⅰ：小写罗马

start：起始数

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

6.5 表格标签

<table border="2px" cellpadding="2px" cellspacing="2px" width="50%" >
  <thead>									# 表头
  <tr>										# 一行
    <th>序号</th>							# 字段th加粗
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody>									# 表单
  <tr>										# 第一行
    <td colspan="2">1</td>					# 字段td不加粗
    <td rowspan="2">学习</td>
  </tr>
  <tr>										# 第二行
    <td>2</td>
    <td>b</td>
  </tr>
  </tbody>
</table>

属性：
border: 表格边框，单位px
cellpadding: 内边距，单位px
cellspacing: 外边距，单位px
width: 像素 百分比
rowspan: 单元格竖跨多少行（即合并单元格）
colspan: 单元格横跨多少列（即合并单元格）

6.6 表单标签

<form></form

表单属性	含义
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

6.6.1 input标签

<form action="">				
    text <input type="text" name="text"> 
</form>

属性：
type：类型
	text：单行输入文本
	password：密码输入框
	date：日期输入框
	checkbox：复选框	
	radio：单选框
	submit：提交按钮
	reset：重置按钮
	butto：普通按钮
	hidden：隐藏输入框
	file：文件选择框
name：表单提交时的“键”
value：表单提交时对应的值
	type="button", "reset", "submit"时，为按钮上显示的文本年内容
	type="text","password","hidden"时，为输入框的初始值
	type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox的默认值
readonly：text和password设置为只读
disabled：禁用

6.6.2 select标签（下拉选项）

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

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

6.6.3 label标签

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

1、<label> 标签为 input 元素定义标注（标记）。
2、<label> 元素不会向用户呈现任何特殊效果。
3、<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

6.6.4 textarea标签

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

属性：
name：名称
rows：行数
cols：列数
disabled：禁用