web前端

最新推荐文章于 2024-09-20 13:42:43 发布

ZJG1229134820

最新推荐文章于 2024-09-20 13:42:43 发布

阅读量67

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ZJG1229134820/article/details/112755236

版权

html:

1.什么是html？
超文本标记语言的缩写
超文本：
超越普通文本：img、音频、视频
、超链接、表格。。。。

标记语言：
	本身不具有行为能力和逻辑能力，只能被读取(浏览器)
	编译语言
	脚本语言


1.本地在编辑器上编写：
	sublime
	vscode
	....
2.本地浏览器运行

3.部署到服务器端

	地址：
		标准url路径：

		http://www.baidu.com

		协议名称://ip地址:端口号/项目路径
			47.100.76.121:80/demo/index.html	
						 :3306

			47.100.76.121:80/demo/index.html->www.baidu.com
	B/S架构项目：
		Browser/Server
	C/S架构：
		client:客户机/server

2.html的特点
1》从上到下依次解析执行
2〉宽松性/容错性
div
p
p
3》大小写不敏感
doctype

3.文档结构
.html
.htm

html:4t
html:5

doctype:
html:
	head：
		meta
		title
		外部引入文件（建议）
	body：
		所有想要展示在浏览上的内容

4.元素
1》元素的组成
开始标签元素内容结束标签
<标签名称> </标签名称>

	没有结束标签的标签：单标签/空元素

	*** 标签不能交叉嵌套使用

2〉元素的分类
	块级元素：
		特点：
			独占一行空间
			可以直接设置宽高属性
	行内元素：
		特点：
			可以和其他元素共享一行空间
			不可以直接设置宽高属性
			不可以直接设置上下的外边距
			行内元素不能嵌套块级元素

5.属性
1》属性设置
写在开始标签内部
和标签名称使用空格隔开
属性名key(键)和属性值value（值）之间使用等号连接
多对属性之间使用空格隔开
2〉属性分类
1》公有性
公有属性：
所有标签都能设置的属性
id：元素的唯一标识
class：设置元素的分类
one two
title:设置提示
style:设置行内样式
属性值必须根据css语法进行设置
私有属性：
只有当前标签能使用
img
2〉布尔性
普通属性：
属性值为字符串
“”
‘’
布尔值属性：
属性值为true/false
key=‘key’
key=“true”
key=true
key(常用)

6.语法
1》空白
div：hello world

	pre:保留用户所输入的格式
2〉字符实体
	&实体名称;

	&nbsp;
	&lt;
	&gt;
	&quot;
	&copy;
	&times;
	。。。。
3》注释
	注释不会被浏览器所解析
	注释的内容不会展示在页面上

	作用：
		提升代码的可读性
		便于代码的维护和管理

	html中的注释不可以嵌套使用

7.标签
body：8px margin
div
span
强调标签：
em
i
strong
b
u
del
…
img:
width:
px
height
src
d:/…/1.png

	alt


br:换行标签
hr：水平线
	size:设置水平线高度
	width:水平线的宽度
	align:水平线的位置
		left
		center
		right
sub
sup

h1-h6:
	标题标签
a:标签
	超链接
	href:设置链接地址
		1》url
		2〉锚点
			通过id属性设置锚点位置
			#id属性值
		3》邮箱地址
			mailto:邮箱地址
	target:设置页面的打开方式
		_blank:打开新页面
		_self:在当前页面中打开
		_top:在顶级框架中打开
		_parent:在父框架中打开

table:
	表格

	caption:设置表格标题
	thead：设置表格头部
	tbody：设置表格体部
	tfoot：设置表格脚部
		tr：一行
			td/th：一个单元格

		table的私有属性：
			align：
			border:
			cellpadding
			cellspacing
			width
			bgcolor
		td/th:
			colspan
			rowspan

form：
	表单
	私有属性：
		action：表单提交地址
		target：
			_self
			_blank
		method:设置表单提交方式
			get:
				1.将数据拼接在浏览器地址栏上
				2.安全性较低
				3.只能提交轻量级数据
			post：
				1.将数据封装在请求体中
				2.安全性较高
				3.可以提交重量级数据
			表单默认使用get请求方式
		enctype：设置表单提交的数据类型


	input：表单组件
		type: