HTML基础

最新推荐文章于 2024-06-18 21:14:33 发布

冬男zdn

最新推荐文章于 2024-06-18 21:14:33 发布

阅读量1.3k

点赞数 1

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/LikeStudyBoy/article/details/78879871

版权

html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

目录：
一、WEB标准的概念及组成
二、HTML及相关概念的介绍
三、HTML5基本结构
四、HTML基本语法
五、HTML常用标记

一、WEB标准的概念及组成

1.1
	WEB标准不是某一个标准，而是一系列标准的集合。
	网页主要由三部分组成：结构，表现，行为。
1.2
	W3C制定：结构和表现的标准
	ECMA制定：行为
1.3
	结构化标准语言：XHTML、XML
	表现标准语言：CSS
	行为标准：对象模型{W3C DOM}、ECMAScript
1.4
	W3C{world wide web consortium万维网联盟}
	ECMA制定的{欧洲电脑厂商联合会}

二、HTML及相关概念的介绍

2.1
	HTML指的是超文本标记语言{hyper text markup language}
	XHTML指的是可拓展超文本标记语言{EXtensible hyper text markup language}
	HTML5是W3C和WHATWG合作的结果
2.2
	W3C：从HTML1.0到HTML4.01；从XHTML1.0到XHTML2.1
	WHATWG:HTML5

三、HTML5基本结构

3.1
	HTML页面是由标签和属性构成
3.2 HTML架构
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd">
	定义文档类型有三种：Strict（严格型)、 Trasitional（过渡型）、Frameset（框架型）
	<html></html>    html的根元素
	<head></head>    文件头
	<body></body>    文件主体
	<meta /> 设置字符集、内容类型、编码格式
	<title></title>       文件标题
 3.3 注意点
	 标签名和属性名称必须小写
	 HTML标签必须关闭
	 属性值必须用引号括起来
	 标签必须正确嵌套
	 必须添加文档类型声明
 3.4 HTML5基本结构
	 <!doctype html> 命名文档类型
	<html> 说明我们写的是标记语言
	<head>文件头部
	<meta charset="utf-8"> 编码格式
	<title></title> 文件标题
	</head>
	<body> 文件主体
		<div></div>
	</body>
	</html>

四、HTML基本语法

4.1 常规标记 也叫双标记
	<标记 属性="属性值" 属性="属性值"></标记>
4.2 空标记 也叫单标记
	<标记 属性="属性值" / >
4.3 说明
	写在<>中的第一个单词叫做标记，标签，元素
	标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内
	一个标记可以没有属性也可以有多个属性，属性和属性值之间不分先后顺序
	空标记没有结束标签，用“/”代替。例如：<hr />

五、HTML常用标记

5.1 文本标题标签
	<h1></h1>……<h6></h6>
5.2 字体标签
	<i></i> <em></em> 倾斜
	<b></b> <strong></strong> 加粗
	<u></u> 下划线
	<br /> 换行
	<hr /> 水平线
	<del></del> 删除
	<ins></ins> 插入 经常与del在一起用
	<sup></sup> 上标
	<sub></sub> 下标
	<P ></P> 段落
	5.2.1 说明
		物理风格:明确指明了字体的类型，无论是何种浏览器，遇到这些表示文字的标签时，
		都用相同的方式进行显示。如：b、i、u
		逻辑风格:并不能像物理风格那样明确知道字体的显示方式，而是让浏览器自行决定，
		不同的浏览器解释的效果可能不一样。如：em、strong、cite、code、small、
		big、samp、kbd、var、dfn、sup、sub
5.3 实体标签
	&nbsp; 不换行空格
	&gt; 右尖括号
	&lt; 左尖括号
	&copy;备案中图标
5.4 常用标签
	<div></div>
	<span></span>
	5.4.1 说明
		div可以把文档分割为独立的、不同的部分。他可以用作严格的组织工具，
		并且不使用任何格式与其关联。
		在DIV+CSS切图布局重构技术中，提到div，而在html中代码布局使用最多标签为div。
		故我们通常将网页重构说成div css制作。
		Div本身没有什么特别之处，而div标签替代了以前table标签布局。
		他们通过对div标签对象设置不同样式实现我们要的美化效果。
		特性，通常一对未设置任何样式的div，独占一行。
		span是文本结点，可以是某一小段文本，或是某一个字。
5.5 列表的应用
	HTML中有三种列表，分别是无序列表{ul}有序列表{ol}自定义列表{dl}
	5.5.1 语法
		<ul>
			<li>列表项内容</li>
	        <li>列表项内容</li>
	    </ul>
	    <ol>
		    <li>列表项内容</li>
	        <li>列表项内容</li>
	    </ol>
	    <dl>
			<dt>名词</dt>
			<dd>解释</dd>
		</dl>
	5.5.2 说明
		无序列表 type值有 circle空心圆、disc实心圆、square方形 也可以设置start参数。
		有序列表 type有1数字、a小写、A大写、i、I阿拉伯，也可以设置start参数。
		<dl>标记不同于前两种列表，它主要用于解释名词，包含两个层次的列表。
		第一层次是需要解释的名词，第二层次是具体的解释。<dd>作为解释的内容在显示时会自动缩进。
		在自定义列表中，一个<dt>标记下可以有多个<dd>标记作为名词的解释和说明。
5.6 超链接
	5.6.1 URL{统一资源定位符}
	5.6.2 语法：
		<a href="目标文件路径及全称/连接地址" alt="替换文本" title="提示文本">链接文本/图片</a>
		空链接：<a href="#"></a>
	5.6.3 说明
		url后边跟的是链接页面的路径(包含文件名)
		title属性，加入这个属性后，当鼠标移动到热点时，则在鼠标下方显示title的内容
		target属性参数定义了打开链接的目标窗口。_blank属性值代表在新窗口中打开链接页面
		_self属性值代表在当前窗体打开链接页面，此为默认值。
5.7 图像
	5.7.1 语法
		<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
	5.7.2 说明
		src表示图片的来源
		align标识图片相对于文字的对齐方式，值top、left、right、bottom、middle
		border标识图片的边框
		width和height设定其图像在页面上显示的宽度和高度
		hspace和vspace属性设置图像周围的空间
		title是专门做提示信息的，鼠标悬停图片上时显示一个小提示，鼠标离开就没有了
		alt是在你的图片因为某种原因不能加载时在页面显示的提示信息
	5.7.3 *相对路径的写法
		当前文件与目标文件在同一目录下，写目标文件名+扩展名
		当前文件与目标文件所在文件夹在同一目录下，写目标文件夹名/目标文件名+扩展名
		当前文件所在的文件夹和目标文件所在的文件夹在同一目录下，
		写../目标文件所在文件夹名/目标文件名+扩展名
5.8 表格
	5.8.1 语法
		<table>
			<tr>
			  <td>第一行第一格</td>
			  <td>第一行第二格</td>
			</tr>
			<tr>
			  <td>第二行第一格</td>
			  <td>第二行第二格</td>
			</tr>
		</table>
		注：一对tr表示一行;一对td表示一列(一个单元格)
	5.8.2 相关属性
		width="表格的宽度"
		height="表格的高度"
		border="表格的边框"
		bordercolor="边框色"
		cellspacing="单元格外间距"
		cellpadding="单元格内间距"
		align="水平对齐" 取值：left、right、center
		valign="垂直对齐" 取值：top、bottom、middle
	5.8.3 合并单元格属性
		合并列：colspan="合并列数"
		合并行：rowspan="合并行数"
5.9 表单
	5.9.1 表单的作用
		用来收集用户的信息的
	5.9.2 表单框
		<form name="表单名称" method="post/get" action=""></form>
	5.9.3 说明
		Post是向服务器上传数据，Get是从服务器获得数据。
		出于安全性考虑，建议最好使用 Post 提交数据 action是给后端人员作为接口用的
	5.9.4 语法
		<input type=" " name=" " value=" " size=" " maxlength=" "/>
	5.9.5 说明
		input是表单中功能最为丰富的，
		input标记可以创建按钮、文本输入框、选择框等各种类型的输入字段。
		name标识表单域的名称
		type标识表单域的类型，可以是文本输入框text、密码password、复选框checkbox、
		单选框radio、提交表单submit和重置键reset
		value属性定义表单域的值
		maxlength控制最多输入的字符数
		size控制框的宽度
	5.9.6 常用类型
		文本框
			<input type="text" value="默认值"/>
		密码框
			<input type="password" />
		提交按钮
			<input type="submit" value="按钮内容" />
		重置按钮
			<input type="reset" value="按钮内容" />
		单选按钮
			<input type="radio" name="" checked="checked" />(默认选中)
		复选框
			<input type="checkbox" name="like" disabled="disabled" checked="checked"/>
		按钮
			<input name="" type="button" value=“按钮内容” />
			（button只起到跳转的作用，不进行提交）
		下拉菜单
			<select name="">
			  <option>下拉选项1</option>
			  <option>下拉选项2</option>
			</select>
		多行文本框
			<textarea name="" cols="" rows=""></textarea>
			rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。