HTML

最新推荐文章于 2022-04-09 10:43:09 发布

jiaody111

最新推荐文章于 2022-04-09 10:43:09 发布

阅读量136

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_42139212/article/details/84612998

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

语法规范：

1.不区分大小写，但是一般使用小写。

2.注释不能嵌套

3. 标签必须结构完整（要么成对出现，要么是自结束标签）

4. 标签可以嵌套（今天天气真不错）但是不能交叉嵌套

5. 标签中属性必须有值，且值必须加引号（双引号和单引号都可以）。

6. id属性：每个元素都可设置。

7. 其代码都定义在<html></html>（根标签）中。主要包含头部分<head></head>和体部分<body></body>组成。

<head/>中的内容不会在网页中显示，它用来帮助浏览器解析页面

<head>中<title/>是网页的标题标签，默认会显示在浏览器中的标题栏中。搜索引擎在检索页面时，会首先检索title标签中的内容

title对搜索引擎最重要，会影响网页在搜索引擎中的排名。

<body>标签用来设置网页中的主体内容。网页中的所有可见内容，都要写在body中。

8. 在标签中添加属性的格式：

<标签名属性名=‘属性值’>数据内容</标签名>

或者 <标签名属性名='属性值' />

一个标签中可以设置多个属性多个属性之间用空格隔开

9. 文档声明< !DOCTYPE html> 编写网页时一定要把h5的文档声明写在网页的最上边

一个完整的标签 == 一个元素

10. 乱码：

乱码出现原因：编码和解码采用的字符集不同

编码：依据一定的规则，将字符串转换为二进制编码的过程

解码：依据一定的规则，将二进制编码转换为字符的过程

字符集：编码和解码所用的规则。常用的字符集：GBK（国标） GB2312（中文系统默认编码） UTF-8（万国码）ANSI 自动解析系统默认编码

在中文系统的浏览器中，默认都是使用GB2312进行解码

11. meta:

设置网页关键字：<meta name='keywords' content='关键字（可以写多个，用逗号隔开）'/>

设置网页描述：<meta name='description' content='网页描述' />

搜索引擎在检索页面时，会同时检索页面中的关键字和描述，但是这两个值不会影响页面在搜索引擎中的排名。

请求重定向：<meta http-equiv='refresh' content='5;url=http://www.baidu.com'/> 5表示等待5秒后重定向到url所在地址

5.内联框架和框架集：

使用内联框架iframe可以引入外部页面

但是在开发中不推荐使用内联框架，因为框架中的内容不会被搜索引擎检索到。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<frameset rows="30% ,30%,40%">
		<!-- 框架集和内联框架的作用类似 都是用于在一个页面中引入其他的外部页面
	框架集可以同时引入多个页面 而内联框架只能引入一个
	frameset和iframe一样，它里边的内容都不会被搜索引擎搜索检索到
	所以如果搜索引擎搜索到的页面是一个框架页的话 他是不能去判断里边的内容的
	使用框架集就意味着页面中不能有自己的内容 只能引入其他的页面
	每加载一个页面 浏览器就需要重新发送一次请求 引入几个页面 就需要发送几次请求
	使用frameset创建框架集 
	但是frameset不能和body出现在同一个页面中
	在frameset中使用frame子标签指定要引入的页面
	属性 rows 指定框架集中的所有页面 按照一行一行的排列
	     cols 指定框架集中的所有页面 按照一列一列的排列
	这两个属性在frameset中必须选择一个 并且需要在属性中指定每个frame所占页面的大小
	-->
		<frame src='表单.html' />
		<frame src='基础布局.html' />
		<frameset cols="50%,50%">
			<frame src='表单.html' />
			<frame src='基础布局.html' />
		</frameset>
	</frameset>
</html>

7.center：

<center></center> 标签中的内容会默认在页面中居中显示。

8.其他常用标签：

和加粗
和斜体

表示语气上的强调，在浏览器中默认使用斜体显示。

表示内容上的强调，在浏览器中默认加粗显示。

斜体表示 加粗表示但是无语义
<big>字体放大 字体缩小比父元素的字体要小一些（合同小字，网站的版权声明）
下标 上标
<ins>插入字符（在插入的字符下有横线）
<del>删除字符（在删除的字符中间有横线）

<cite>定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题（斜体表示）

<q>（短）引用语（有双引号，内联引用）

<blockquote>长引用（块级引用）

<pre>预格式标签将代码中的格式保存不会忽略空格

<code>表示代码标签（不会保留格式）

一般<pre>和<code>结合使用，表示一段代码标签

11.表单：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<!-- 表单的作用 将用户信息提交给服务器 
		比如 搜索引擎的搜索框 注册登录等
		使用form标签创建表单
		
		form标签中有action属性 该属性指向的是一个服务器的地址 当提交表单时
		会提交到action属性对应的地址
		
		使用input创建单行文本框 type属性默认是text 如果希望表单项的数据提交到服务器中
		还需给表单设置name属性 用户填写的信息会附在url地址后 以查询字符串的形式发送给服务器
		url地址？查询字符串
		格式： 属性名=属性值&属性名=属性值&属性名=属性值
		使用提交按钮 提交表单 
		使用input创建一个提交按钮 type=submit
		在提交按钮中 可以通过value属性指定按钮上的文字
		在文本框中的value属性 是输入的默认值
		密码框 type属性值是password
		单选按钮 type属性值是radio 单选按钮通过name属性进行分组 name属性相同的是同一组按钮
		像这种需要用户选择但是不需要用户直接填写内容的表单项 还必须指定一个value属性
		这样被选中的表单项的value属性将会最终提交给服务器
		单选和多选按钮 默认选中 checked属性设置为checked
		多选按钮 type属性是checkbox 通过name属性进行分组 name相同的是一组
		下拉列表 使用select创建下拉列表 使用option创建列表项
		下拉列表的name属性需要指定给select value属性指定给option
		下拉列表 默认选中 设置selected属性值为selected
		下拉列表的multiple="multiple"可将下拉列表设置为多选的下拉列表
		optgroup属性能对下拉列表的选项进行分组 同一个group中的选项是一组 通过label属性指定分组的名字
		textarea创建多行文本框
		重置按钮 type属性值为reset 表单中的内容将会恢复成默认值
		type属性值为button 创建按钮
		除了使用input 也可以使用button标签创建按钮
		label标签用来选中表单中的提示文字
		label的for属性值需要指定一个表单项的id值
		fieldset能对表单进行分组 将表单中的同一组放到同一个fieldset中
		在fieldset中可以设置legend 用来显示分组信息
		-->
		<form action="url">
			<fieldset>
				<legend>用户信息</legend>
				<label for='admin'>用户名</label><input id='admin' type="text" /> <br />
				密码<input type='password' /> <br />
				性别<input type="radio" name='gender' value='male' checked="checked" id='male' /><label for='male'>男</label>
				<input type="radio" name='gender' value='female' id='female' /><label for='female'>女</label><br />
			</fieldset>
			<fieldset>
				<legend>用户爱好</legend>
				<input type='checkbox' name='hobby' value='football' />足球
				<input type='checkbox' name='hobby' value='basketball' />篮球
				<input type='checkbox' name='hobby' value='valley' />排球
				<input type='checkbox' name='hobby' value='badmention' />羽毛球<br />
				<select name='stars'>
					<optgroup label="女明星">
						<option value='fbb'>范冰冰</option>
						<option value='lxr' selected="selected">林心如</option>
					</optgroup>
					<optgroup label="男明星">
						<option value='zbs'>赵本山</option>
						<option value='ldh'>刘德华</option>
					</optgroup>
				</select><br />
				多行文本框<textarea></textarea><br />
				<input type="submit" value="提交" />
				<input type="reset" value="重置" /><br />
			</fieldset>
			<button type="submit">提交</button>
		</form>
	</body>
</html>

12.表格：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				width: 300px;
				margin: 0 auto;
				border: 1px solid bisque;
				/* table和td之间默认存在一定距离 
				通过border-spacing属性可以设置这个距离 
				border-collapse可以设置边框合并 一旦合并 border-spacing失效
				*/
				border-spacing: 0;
				border-collapse: collapse; /* 设置边框合并 */
			}
			td{
				border: 1px solid bisque;
			}
			th{
				border: 1px solid bisque;
			}
			/* 给某些行设置背景颜色 */
			tr:nth-child(even){
				background-color: #BC8F8F;
			}
			/* 鼠标移入哪一行设置该行背景颜色 */
			tr:hover{
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<!-- 		使用table创建表格 （块元素）
		在table中使用tr表示表格中的一行 
		
		在tr中使用td创建一个单元格 
		th可以用来表示table的表头 默认样式是居中和加粗
		colspan 横向合并单元格 属性值表示需要合并几个单元格
		rowspan 纵向合并单元格 属性值表示需要合并几个单元格
		表格的列数由td最多的那行决定
		-->
		<table >
			<tr>
				<th>学号</td>
				<th>姓名</td>
				<th>性别</td>
				<th>住址</td>
			</tr>
			<tr>
				<td>1</td>
				<td>aaa</td>
				<td>f</td>
				<td>学三</td>
			</tr>
			<tr>
				<td>2</td>
				<td>bbb</td>
				<td>m</td>
				<td>学三</td>
			</tr>
		</table>
	</body>
</html>

jiaody111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

语法规范：1.不区分大小写，但是一般使用小写。2.注释不能嵌套3. 标签必须结构完整（要么成对出现，要么是自结束标签）4. 标签可以嵌套（今天天气真不错）但是不能交叉嵌套5. 标签中属性必须有值，且值必须加引号（双引号和单引号都可以）。6. id属性：每个元素...
复制链接

扫一扫