html基础总结

<meta charset = "utf-8"> 指定字符编码

文字排版标记
	1.文字和特殊符号
		对于一些特殊符号和空格不能直接输入,必须通过一个以"&"开头,";"结尾的实体名称来代替
	2.段落标记
		以<p>标记开头,以</p>标记结束,段落标记在段前和段后各添加一个空行,而定义在段落标记中的内容不受该标记的影响
	3.换行标记
		<br>
	4.标题标记
		<h1> --> <h6> 数字越小级别越高字体越大
		例:<h4 align = "cneter">居中</h4> 
		align有多种属性,center,left,right...等等
	5.文字列表标记
		将文字以列表的形式一次排列
		(1)无序排表
			例:
				<ul>
					<li>test</li>
				</ul>
			显示的时候test前面有一个实体圆点符号
		(2)有序排表
			例:
				<ol>
					<li>test</li>
				<ol>
			
			有序顾名思义按照顺序排列,test前面有1-->标记

图片与超链接标记
	1.图片标记
		<img src="url" width="value" height="value" border="value" alt="提示文字">
			src:图片的来源
			width:图片宽度
			height:图片高度
			border:图片外边框的宽度。默认为0
			alt:当图片无法显示时显示的文字
	2.超链接标记
		<a href="url" hreflang="language" name="bookmarkName" type="mimeType" charset="code" shape="area" coords="coordinate" target="target" tabindex="value" accesskey="key">test</a>
			href:网址,可以是绝对路径
			hreflang:超链接位置所使用的语言
			name:超链接表示名
			type:超链接位置所使用的MIME类型
			charset:超链接位置所使用的编码方式
			target:超链接的目标窗口
				_parent:在上一级窗口打开
				_blank:在新窗口打开
				_self:在同一个窗口打开,一般不用设置
				_top:在浏览器整个窗口中打开
			tabindex:按下tab时移动的顺序,从属性值最小的开始, 0-32767
			accesskey:超链接设置快捷键
		例:<a href="https://www.baidu.com">百度</a>

HTML5新增的语义元素
	1. <header> 页面的标题
	2. <footer> 页面的脚注
		脚注一般包含一些基本信息,通常放在最底部,但是不是必须的
	3. <section> 页面中一个区域
	4. <article> 文档 ,页面或者应用程序中的所有正文部分,所描述的内容应该是独立的完整的可以犊子被外部引用的。一个<article>通常有自己的标题和脚注部分
			标记的内容独立于文档的其余部分
	5. <aside> 表示当前页面或文章的附属信息部分,常见的是侧边栏 广告 导航条等
	6. <nav> 表示页面中的导航链接区域 包括一个页面或者一个站点内的链接

制作表格
	1. 表格标记 <table>
			表示整个表格,有诸多属性,例 width border align bgcolor
	2. 标题标记 <caption>
	3. 表头标记 <th>
	4. 表格行标记 <tr> 
			一组<tr>表示表格中的一行,要嵌套在<table>中使用,也具有align background等属性
	5. 单元格标记 <td>
			又称列标记,一个<tr>中可以嵌套n个<td> 也具有align background等属性
	
	
	例:
		<table width="400" height="260" align="center" border="1">
			<caption>成绩</caption>
				<tr>
					<td align="center" valigh="middle">姓名</td>
					<td align="center" valigh="middle">语文</td>
					<td align="center" valigh="middle">数学</td>
					<td align="center" valigh="middle">英语</td>
				</tr>
				<tr>
					<td align="center" valigh="middle">张三</td>
					<td align="center" valigh="middle">语文</td>
					<td align="center" valigh="middle">数学</td>
					<td align="center" valigh="middle">英语</td>
				</tr>
				<tr>
					<td align="center" valigh="middle">李四</td>
					<td align="center" valigh="middle">语文</td>
					<td align="center" valigh="middle">数学</td>
					<td align="center" valigh="middle">英语</td>
				</tr>
				<tr>
					<td align="center" valigh="middle">王麻子</td>
					<td align="center" valigh="middle">语文</td>
					<td align="center" valigh="middle">数学</td>
					<td align="center" valigh="middle">英语</td>
				</tr>
		</table>
	
播放音频和视频
	1. 播放音频标记 <audio>
		<audio src="...mp3" autoplay>test</audio>
			test:当浏览器不支持音频格式时显示。
	2. 播放视频标记 <video>
		<video src="url" width="value" height="value" autoplay="true|false" controls="true|false">test</video>
			src:视频地址
			width:播放器宽度
			height:播放器高度
			autoplay:是否自动播放
			controls:是否自动显示播放控件组件
		
表单标记
	1. <from> 标记
			用于在页面中插入表单
			例: <from name="form name" method="method" action="url" enctype="value" target="target_win"></form>
					name:指定表单的名称
					method:网络请求方式
					action:提交的url地址
					enctype:编码方式
						text/plain:以纯文本形式传送消息
						application/x-www-form-urlencoded:默认的编码形式
						multipart/form-data:使用MINE编码
					target:指定返回信息的显示方式
						_parent:显示在父级窗口中
						_blank:显示在新的窗口
						_self:显示在当前窗口
						_top:显示在顶级窗口
	2. <input> 表单输入标记
			向页面添加单行文本,多行文本,按钮等
			例: <input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit" readonly="" size="digit" src="url" usemap="url" alt="" name="checkbox" value="checkbox">
					type:指定是哪种类型的输入字段
						
						type属性:
							属性值: 说明
							text: 文本框
							password: 密码域
							file: 文件域
							url: *URL地址
							email: *E-mail地址
							color: *颜色选择器
							datetime: *日期时间选择器
							number: *数字选择器
							range: *滑块
							submit: 提交按钮
							reset: 重置按钮
							button: 普通按钮
							hidden: 隐藏域
							image: 图像域
							radio: 单选按钮
							*date: 日期选择器
							checkbox: 复选按钮
							
							***
								注: 说明标记的*号的属性值为html5新增加的功能
									html5还提供了两个有用的属性,placeholder(占位文本) autofocus(自动聚焦)
									
						
					disabled:指定输入字段不可用,变成灰色,可以为空值
					checked:指定输入字段是否为选中状态,用于type属性为radio和checkbox的情况下。可以为空值
					width:指定输入字段的宽度,用于type属性为image的情况下
					height:指定输入字段的高度,用于type属性为image的情况下
					maxlength:指定输入字段可输入文字的个数,用于type属性值为text和password的情况下。默认没有字数限制
					readonly:指定输入字段是否为只读。可以为空值
					size:指定输入字段的宽度,当type属性为text和password时,以文字个数为单位,其余情况下以像素为单位
					src:指定图片的来源,只有type属性为image时有效
					usemap:为图片设置热点地图,只有type属性为image时有效
					alt:指定当图片无法显示时显示的文字,只有type属性为image时有效
					name:指定输入字段的名称
					value:指定输入字段默认数据值,当type属性为checkbox和radio时不能省略此属性,其余情况可以省略。当type属性为button,reset,submit时 指定的是按钮上显示的文字,当type属性为checkbox和radio时 指定的是数据项选定时的值
	3. <select></select> 下拉列表标记
			创建一个下拉列表
			例:<select name="name" size="digit" multiple="multiple" disabled="disabled"></select>
					name:指定列表框的名称
					size:指定列表框中显示的选项数量,如果超过该数量可以通过拖动滚动条查看
					multiple:让列表框支持多选
					disabled:指定当前列表框不可使用
					
			<select name="demo" size="6" >
				<option value="1">文件</option>
				<option value="2">编辑</option>
				<option value="3">搜索</option>
				<option value="4">试图</option>
				<option value="5">格式</option>
				<option value="6">语言</option>
				<option value="7">设置</option>
				<option value="8">宏</option>
			</select>
	4. <textarea> 多行文本标记
			与单行文本标记相比多行文本标记可以输入更多的内容,通常<textarea>标记出现在<form>标记的标记内容中。
			例:<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">test</textarea>
					name:指定多行文本框的名称,当表单提交后,在服务器获取表单数据时应用
					cols:指定多行文本框显示的列数
					rows:指定多行文本框显示的行数
					disabled:指定当前多行文本框不可使用
					readonly:指定当前多行文本框为只读
					wrap:设置多行文本中的文字是否自动换行
						hard:默认值,表示自动换行,如果文字超过cols属性所指的列数就自动换行,并且提交服务器时换行符也被提交
						soft:表示自动换行,如果文字超过cols属性所指的列数就自动换行,但是提交服务器时换行符不会被提交
						off:不自动换行,如果想让文字换行只能通过Enter强制换行
						
	
			<form method="POST" >
				<div>
					<textarea rows="5" cols="40">
						一二三四五,多行文本标记
						一二三四五,多行文本标记
						一二三四五,多行文本标记
					</textarea>
				</div>
			</form>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值