2020-10-27 HTML基础知识整理,基础标签及属性

web标准的构成:

		结构:html用于描述页面的结构
		表现:css用于控制页面中的元素样式
		行为:Javascript用于响应用户的操作
	html简介:
		HyperText Markup Language超文本标记语言, 是一种标记语言,而不是编程语言,它是制作网页的基础语言,主要用于描述超文本中内容的显示方式,它不需要编译,可以直接由浏览器执行。

html基础结构:

<!DOCTYPE html>
			<html>
				<head>
					<meta content="utf-8"/>
					<title></title>
				</head>
				<body>
				</body>
			</html>
		!DOCTYPE 声明文档类型
		!DOCTYPE html 声明html5
		html是双标签  页面根元素
		head文档的开头部分 里边包含文档标题 字符编码 link style scrip meta
		utf-8国际通用字符编码  gb-2312简体中文
		body主体内容

标签

p段落标签
		语法:<p></p>
		属性:align 水平对齐
			left 默认 居左
			center 居中
			right 居右
hn标题标签 n是1-6
		语法:<hn></hn>
		属性:align 水平对齐
			left 默认 居左
			center 居中
			right 居右
		特点:自带加粗  数字越大文字越小 h1最大 h6最小
无序列表
		语法:
			<ul>
				<li></li>
			</ul>
		属性:type规定列表项的项目符号
				disc 默认值 实心小圆点
				circle 空心小圆圈
				square 实心小方块
				none 没有
		特点:列表项没有先后顺序
有序列表
		语法:
			<ol>
				<li></li>
			</ol>
		属性:type规定列表项的项目符号
				1 默认 
				a或A 
				i或I
			start起始值  只能是数值
			reversed倒序 不兼容
		特点:列表项有先后顺序
定义列表
		语法:
			<dl>
				<dt></dt>
				<dd></dd>
			</dl>
		特点:dt和dd是并列关系  dt只能由一个 dd可以有多个
img图片标签
		语法:<img />
		属性:src图片路径
				相对路径
				绝对路径
			alt图片无法加载是提示的文字
			title鼠标放在图片上显示的提示文字
			border 图片的边框
			width 图片的宽度
			height 图片的高度
			align
a标签
		语法:<a></a>
		属性:href目标跳转的路径
				内部链接(相对路径)
				外部链接(绝对路径)
			target链接目标的打开方式
				_self 默认值 在当前窗口打开
				_blank 在新窗口打开
		空连接:
			<a href="#"></a>或<a href=""></a>
		锚链接:
			<a name="锚点名"></a>
			<a href="#锚点名"></a>
			或
			<a id="锚点名"></a>
			<a href="#锚点名"></a>
		邮件链接:
			<a href="mailto:xxx"></a>
		图片链接:
			<a href="">
				<img src=""/>
			</a>
			或
			<a href="图片路径"></a>
		下载链接:
			<a href="" download="下载文件路径"></a>
hr标签
		语法:<hr />
		属性:width设置宽度
				px
				%
			color 设置颜色
				十六进制
				英文单词
				rgb()
			size设置粗细
				1-7 7最大 1最小
			align设置水平对齐
				left 居左
				center 默认值 居中
				right 居右
font标签
		语法:<font></font>
		属性:size设置字体大小
				1-7
			color 设置颜色
				十六进制
				英文单词
				rgb()
			face(family)设置字体
				字体名字
br标签
		语法:<br />
i标签
		语法:<i></i>
		特点:倾斜
u标签
		语法:<u></u>
		特点:下划线标签
b标签
		加粗标签
		语法:<b></b>
strong强调
		表现为加粗样式
		语法:<strong></strong>
em强调
	 	表现为倾斜样式
		语法<em></em>
span 内联标签 用于布局
		语法:<span></span>
div 块级标签 用于布局
		语法:<div></div>
		特点:可以嵌套任意元素(标签)
table表格
		语法:
			<table>
				<tr>
					<th></th>
				</tr>
				<tr>
					<td></td>
				</tr>
			</table>
		table标签
		属性:border设置表格的边框
				px
			width设置表格的宽度
				px
				%
			height设置表格的高度
				px
			align 设置表格的水平对齐
				left
				center
				right
			bgcolor 设置表格的背景颜色
				颜色值
			cellpadding 设置内容与单元格之间的距离 边距
			cellspacing 设置单元格与单元格之间的距离 间距
		tr标签  表格的行
		属性:height设置行的高度
				px
				%
			bgcolor 设置行的背景颜色
			align 水平对齐
				left 
				center
				right
			valign 垂直对齐
				top
				middle
				bottom
		td/th标签 表格的单元格/标题单元格
		属性:bgcolor 设置背景颜色
				颜色值
			width 设置单元格的宽度
			height 设置单元格的高度
			align 水平对齐
			valign 垂直对齐
			rowspan 跨行合并  在下一行删除
			colspan 跨列合并  在当前行删除
		caption标签 表格的标题
		语法:<caption></caption>
		
		细线表格的制作:
			设置表格的背景色
			设置行的背景色
			设置单元格间距为1px
form表单标签
		语法:<form></form>
		属性:action数据提交的地址
			method 提交方式
				get 默认值 提交到当前页面  少量数据
				post 提交到服务器 大量数据
			name 表单名字(实现交互)
			target 打开方式
input单行文本输入框
		语法:<input />
		属性:type控制输入框输入类型
				text 文本输入框
				password 密码输入框
				radio 单选框  name属性值相同
				checkbox 复选框
				email 邮箱
				color 颜色块
				date 日期
				reset 重置按钮
				button 普通按钮
				submit 提交按钮
				image 图片提交按钮 配合src属性使用
				number 数值  max限制最大上限 min限制最小值  value初始值 step步数
				file 文本域
			value 改变按钮的默认文字
			name 名字
			placeholder 输入框提示的文字
			checked 默认选择
textarea 多行文本输入域
		语法:<texterea></texterea>
		属性:name
			rows 文本域的行数 相当于高度
			cols 文本域的列数 相当于宽度
			maxlength 设置文本域的最大字数
select下拉列表
		语法:
			<select name="">
				<option value=""></option>
			</select>
		属性:name 名字
			size 展示列表项的多少
			selected 默认选项
fieldset 分组表单
		legend 分组名称
label 没有任何效果
		主要配合input使用  
		<label>男</label>
		属性:for的值 与相关input里的id的值相同
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值