html笔记

最新推荐文章于 2023-08-06 13:00:03 发布

uchiha711

最新推荐文章于 2023-08-06 13:00:03 发布

阅读量101

点赞数

分类专栏： javeweb

本文链接：https://blog.csdn.net/uchiha711/article/details/82957968

版权

javeweb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html简介

html是什么
- Html是用来描述网页的一种语言。
  (1)HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  超文本标记语言
  语言：
  人与计算机交互的工具
  超文本：
  (1)普通文本不能实现的，超文本可以实现，能实现普通文本不能实现的功能
  (2)包括超链接的文本
  标记：
  就是标签，不同的标签能实现不同的功能
  (2)HTML 不是一种编程语言，而是一种标记语言(markup language,标记语言是一套标记标签(markup tag));
  (3)HTML 使用标记标签来描述网页
html能做什么
html通过标签的形式将信息展示给用户
html书写规范
(1)html结构

			<html>
				<head>
					包括资讯信息：整个页面的属性、指导浏览器解析的标签、引入外部文件的标签
				</head>
				<body>
					我们需要展示的信息
				</body>
			</html>

		(2)html标签是以尖括号包裹关键字成对出现的，有开始标签和结束标签，支持正确的嵌套
		(3)大部分标签有属性 格式：属性=“属性值”（多个属性之间用空格隔开）
		(4)空标签：功能比较单一 ，例如：<br></br> === <br/>
		(5)html不区分大小写，建议使用小写
	
	需求：写一段文字，将其中的部分文字变成红色，字号变大


    <html>
    	<head></head>
    	<body>
    		我请大家吃狗不理<font color="red" size="5">包子</font>，
    		<br/>
    		大家很高兴！！！
    	</body>
    </html>

html基本标签

文件标签（结构标签）

<html><html>:根标签
<head>
	<title></titile>:页面的标题
</head>
<body></body>:内容
	属性：
		text：文本的颜色
		bgcolor：背景色
		background：背景图片
	颜色的三种表示方式：
		1.单词：red/green/black...
		2.rgb三原色：reg（0，0，0） 0-255
		3.#000000 #ffffff #325678 （颜色捕捉器）

排版标签

1.注释标签：<!-- -->
2.换行标签：<br/>
3.段落标签：<p>文本</p>
	特点：段与段之间有空行
	属性：
		alien：对齐方式
			left right center
4.水平线标签：<hr/>
	属性：
		width：长度
		size：粗度
		color：颜色
		align：对齐方式
	尺寸的写法：
		1.像素：100px
		2.百分比：占据副标签的百分比，随副标签大小的变化而变法

块标签

<div></div>:行级块标签
<span></span>:行内块标签
作用：
	1.<div></div>:div+css布局
	2.<span></span>:进行友好提示

文字块标签

	基本文字标签：<font></font>
		属性：
			color：颜色
			size：大小（1-7 默认3）
			face：字体
	标题标签：<h1></h1>----<h6></h6>
		随数字的增大而变小 默认加粗 内置字号 默认占据一行

清单标签（列表标签）

	无序标签：	<ul></ul>
						<li></li>：列表项
						属性：
							type：disc/square/circle
						示例：
						<ul>
							<li>列表项</li>
							<li>列表项</li>
						</ul>
	有序标签：	<ol></ol>
						<li></li>：列表项
						属性：
							type：1/A/a/I/i（数字/字母/罗马数字）
							start：数字/代表首项开始位置
						示例：
							<ol>
								<li>列表项</li>
								<li>列表项</li>
								<li>列表项</li>	
							</ol>
		列表标签的作用：实现菜单项（可以实现横向或者纵向菜单）
		无序列表标签怎么去掉小圆点？html中不能直接去掉 再css中

图形标签

	<img/>(自关闭标签)
		属性：
			src：图形地址
			width：宽度
			height：高度
			border：边框
			align：对齐方式
				top middle bottom
				文本相对于图片的位置
			alt:图片的文字说明

链接标签：

	<a></a>
		属性：
			href：跳转页面地址
			name：名称，锚点
			tarfet：_self(自己) _blank(新页面，保留之前页面) 默认_self
		作用：
			1.页面跳转（调到外网需要加协议 https）
			2.访问锚点：回到锚点（顶部/底部/中间），在访问锚点时的书写格式：#name的值

表格标签

	<table></table>
		属性：
			border：表格边框
			width：表格的宽度
			align：对齐方式
			bgcolor：背景颜色
	<tr></tr>：代表行
	<td></td>：代表单元格
							属性：
								colspan：列合并
								rowspan:行合并
	<th></th>：	相当于<td>，知识内置样式加粗居中
	作用：
		1.简单实现一个表格样式
		2.进行页面布局
	示例：
		<table>
			<tr>
				<th>表头</th>
				<td>普通单元格</td>
			</tr>
		</table>
	<thead></thead>、<tbody></tbody>、<tfoot></tfoot>
	作用：分块加载，用户体验比较好

html表单标签

form标签

	<form></form>
		属性：
			name：表单名称
			action：提交的路径
			method：提交方式
				get：提交将数据加在地址栏的后面 格式？name=value&name=value；
				post：将数据封装再请求体中
					1.get相对不安全 post相对安全
					2.get提交有大小限制 根据浏览器不同而不同；post没有大小限制
		示例：
		<form>
			<table>
				<!-- form内嵌table-->	
			</table>
		</form>

input

	<input type= " "/>
		type:根据type属性实现不同的表单项功能
			text：普通的文本输入框
			password：密码输入框 显示掩码
			radio：单选按钮
				name：相同name属性值的一组选择互斥 只能单选 需要加value属性值
				checked：默认被选中
			checkbox：复选框
				name：相同name为一组 需要加value
				checked：默认被选中
			file：上传文件的控件
			button:普通按钮 无内置功能
			submit：点击按照action地址提交
			rest：重置 点击清空填写的内容
			image：图片按钮 点击按照action提交
				src:加载图片
				alt：图片提示文字
			hidden：隐藏表单 作用是再提交数据的时候，服务器需要这个数据但是不需要用户看到
		注意：name属性必须要写

select标签

	<select></select>
		属性：
			name：表单项的名称
			option：可选项 下拉菜单之间的级联
				属性：
					value：表单项的值
					selected：默认被选中

textarea

	文本域标签：
		属性：
			cols：列数
			rows：行数
		注意：默认的文本值在标签体当中

html框架标签及其他

框架标签

	frameset：
		属性：
			rows：按行划分
			cols：按列划分
			划分格式：rows="12,*"
	frame：
		属性：
			name：名称，方便target根据name值进行定位
			src：加载的页面地址

其他标签

	<meta>
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		默认为以上
	<link>
		<link rel="stylesheet" type="text/css" href="./styles.css">
			href：引入css文件的地址
		css的一个引入方式
	<script>
		<script type="text/javascript" src=""></script>
			src：js的文件地址

特殊字符

&nbsp; 空格
&gt; 大于号
&lt; 小于号
&copy; 版权符号
&reg; 注册符号

uchiha711

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html笔记

html简介html是什么Html是用来描述网页的一种语言。(1)HTML 指的是超文本标记语言 (Hyper Text Markup Language)超文本标记语言语言：人与计算机交互的工具超文本：(1)普通文本不能实现的，超文本可以实现，能实现普通文本不能实现的功能(2)包括超链接的文本标记：就是标签，不同的标签能实现不同的功能(2)HTML 不是一种编程语...
复制链接

扫一扫