HTML学习笔记

<!DOCTYPE html> //文档类型声明标签(告诉游览器使用哪种HTML版本来显示网页)最前面
<html lang="en"> //当前文档显示语言  en:英语  zh-CN:中文
<html>//根标签
	<head>//头部标签
		<meta charset="UTF-8" /> //字符集:多个字符的集合,以便计算机能够识别和储存各种文字
				          //charset常用的值:GB2312(简体中文),BLG5(繁体中文),GBK,UTF-8(万国码)
				          //必须要写,不然容易出现乱码
		<title>  </title>//标题标签
	</head>
	<body>//主体标签
		
	</body>
</html>

标题标签
	<h1>一级标签</h1>
	<h2>二级标签</h2>
	....
	<h6>六级标签</h6>   //加粗加黑,占一行  1>6(字体大小)
段落标签paragraph
	<p>  </p>     //文本会根据浏览器窗口大小自动换行 段落与段落之间有间隙
换行标签
	<br />     //强制换行 单标签 换行之后无缝隙
文本格式化标签     //突出重要性,比普通文字重要
	加粗<strong>  </strong>推荐使用
	       <b>  </b>
	倾斜<em>   </em>推荐使用
	       <i>   </i>
	删除线<del>  </del>推荐使用
	           <s>   </s>
	下划线<ins>   </ins>推荐使用
	           <u>    </u>
特殊标签   //没有语义,一个盒子,用来装内容
	<div>   </div>//分割,分区(大盒子)
		        //用来布局,一行只能放一个
	<span>   </span>//跨度,跨距(小盒子)
		              //一行可放多个
图像标签
	<img src="图像URL"/>      //单标签    src是图像标签的必须属性,用于指定文件图像的路径和文件名
			           //其他属性:src      图片路径,必须属性
				               alt       文本,替换文本,图像不能显示的文字
				               title     文本,提示文本,鼠标放在图像上显示的文字
				               width  像素,图片的宽度
				               height 像素,图片的高度     //一般情况下,width和height只用一个
				               border 像素,图片边框粗细
			           //注意点:图像标签可以有多个属性,必须写在标签的后面
			    	            属性之间不分先后顺序,标签与属性,属性与属性之间均以空格分开
				            属性采用键值对的格式,即:属性=“属性值”
			           //目录文件夹,根目录
			           //相对路径		同一级路径
						下一级路径    /
						上一级路径    ../
			              绝对路径
超链接标签
	<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>           //从一个页面链接到另一个页面
								       //href:必须属性
								       //target:  _self 默认值
									       _blank 在新窗口中打开
								       //外部链接 href="http://..."
								          内部链接 href="....html"
								          空链接     href="#"
								          下载链接  href="....zip"     (链接的是文件 .exe   .zip)
								           网页元素链接 
								           锚点链接  (点击链接,快速定位到页面中的某个位置)
									              href="#名字"   找到目标位置标签,里面添加一个id属性=名字
注释
	<!--   -->      快捷键Ctrl+/
特殊字符
	空格符	&nbsp;		小于号	&lt;		大于号	&gt;	(重点记住)
	和号&	&amp;		人民币	&yen;		版权	&copy;
	注册商标	&reg;		摄氏度	&deg;		正负号	&plusmn;
	乘号	&times;		除号	&divide;		平方	&sup2;		立方	&sup3;
表格标签       //显示,展示数据
	<table>//定义表格的标签
		<tr>//定义表格中的行
			<th>    </th>//表头单元格标签:位于表格第一行或第一列,表头单元格里面的内容加粗居中显示    table head
			<td>    </td>//定义表格中的单元格  table date
		</tr>
	</table>
表格属性    //一般写在css中
表格结构标签     //包含在<table>标签中
	<thead>  </thead>   //表格头部区域,内部必须有<tr>标签
	<tbody>  </tbody>   //表格主体区域
合并单元格
	跨行合并:rowspan="合并单元格的个数"  //例如<td rowspan="2">  </td>
	跨列合并:colspan="合并单元格的个数"
	目标单元格(写合并代码)
		跨行:最上侧单元格为目标单元格
		跨列:最左侧单元格为目标单元格
	合并单元格之后,要删除多余的单元格
列表标签     //用来布局的
	无序列表
		<ul>//只能在<ul>标签中放<li>标签
			<li>列表项1</li>//<li>标签中可以容纳所有元素
			<li>列表项2</li>
			<li>列表项3</li>
			...
		</ul>
	有序列表
		<ol>//只能在<ol>标签中放<li>标签
			<li>列表项1</li>//<li>标签中可以容纳所有元素
			<li>列表项2</li>
			<li>列表项3</li>
			...
		</ol>
	自定义列表
		<dl>//只能在<dl>标签中放<dt>,<dd>标签
			<dt>名词1</dt>
			<dd>名词1解释1</dd>
			<dd>名词1解释2</dd>
			...
		</dl>
表单标签    //收集用户信息
	表单域//包含表单元素的区域
		<form action="url地址" method="提交方式" name="表单域名称">  //method="提交方式"   get/post
			各种表单元素控件
		</form>//定义表单域,以实现用户信息的收集和传递,会把他范围内的表单信息提交给服务器
`		<label for="">    </ label>     //<label>标签为<input>元素定义标注(标签)
					//<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
					//核心:<label>标签的for属性应当于相关元素的id属性相同
					//例如:<label for="sex">男</label>
					           <input type="radio" name="sex" id="sex" />
	表单控件(表单元素)//允许用户在表单中输入或者选择的内容控件
		<input type="属性值" />   //单标签,输入的意思,用于收集用户信息
				           //其他属性:name          定义input元素的名称           //name和value是每个表单元素都有的属性值,主要供后台人员使用    
					               value           定义input元素的值              
					               checked      规定input元素首次加载时应该被选中          //主要针对于单选按钮和复选按钮  checked="checked"  
					               						     //单选只能写一个,复选可写多个  一打开页面,就可以默认选中某个表单元素
					               maxlength  规定输入字段中的字符的最大长度
				           //type属性值:text             文本框,定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字
					                   password   密码框
					                   radio          单选按钮                 
					                   checkbox   复选框(多选按钮)                  //单选按钮和复选按钮要有相同的name值
					        	   submit       提交按钮,把表单数据发送到服务器
						   reset          重置按钮,把表单元素还原到初始的默认状态
						   botton       定义可点击按钮(后期结合js使用)
						   file             文件域:上传文件
						   hidden       定义隐藏的输入字段
						   image        定义图像形式的提交按钮
		<select>                                                  // 下拉表单元素:多个选项让用户选择,想节约空间时
			<option>选项1</option>	    <select>中至少包含一对<option>
			<option>选项2</option>	    在<>中定义selected="selected"时,当前选项即为默认选项
			<option>选项3</option>
			...
		</select>
		<textarea>                                              //文本域元素:用户输入内容较多的情况下,比如:留言板,评论
						   属性值:cols(每行中的字符数), rows(显示的行数),实际开发中用CSS来改变大小	
		</textarea>	       
	提示信息//



双标签,单标签
包含关系,并列关系<!DOCTYPE html> //文档类型声明标签(告诉游览器使用哪种HTML版本来显示网页)最前面
<html lang="en"> //当前文档显示语言  en:英语  zh-CN:中文
<html>//根标签
	<head>//头部标签
		<meta charset="UTF-8" /> //字符集:多个字符的集合,以便计算机能够识别和储存各种文字
				          //charset常用的值:GB2312(简体中文),BLG5(繁体中文),GBK,UTF-8(万国码)
				          //必须要写,不然容易出现乱码
		<title>  </title>//标题标签
	</head>
	<body>//主体标签
		
	</body>
</html>

标题标签
	<h1>一级标签</h1>
	<h2>二级标签</h2>
	....
	<h6>六级标签</h6>   //加粗加黑,占一行  1>6(字体大小)
段落标签paragraph
	<p>  </p>     //文本会根据浏览器窗口大小自动换行 段落与段落之间有间隙
换行标签
	<br />     //强制换行 单标签 换行之后无缝隙
文本格式化标签     //突出重要性,比普通文字重要
	加粗<strong>  </strong>推荐使用
	       <b>  </b>
	倾斜<em>   </em>推荐使用
	       <i>   </i>
	删除线<del>  </del>推荐使用
	           <s>   </s>
	下划线<ins>   </ins>推荐使用
	           <u>    </u>
特殊标签   //没有语义,一个盒子,用来装内容
	<div>   </div>//分割,分区(大盒子)
		        //用来布局,一行只能放一个
	<span>   </span>//跨度,跨距(小盒子)
		              //一行可放多个
图像标签
	<img src="图像URL"/>      //单标签    src是图像标签的必须属性,用于指定文件图像的路径和文件名
			           //其他属性:src      图片路径,必须属性
				               alt       文本,替换文本,图像不能显示的文字
				               title     文本,提示文本,鼠标放在图像上显示的文字
				               width  像素,图片的宽度
				               height 像素,图片的高度     //一般情况下,width和height只用一个
				               border 像素,图片边框粗细
			           //注意点:图像标签可以有多个属性,必须写在标签的后面
			    	            属性之间不分先后顺序,标签与属性,属性与属性之间均以空格分开
				            属性采用键值对的格式,即:属性=“属性值”
			           //目录文件夹,根目录
			           //相对路径		同一级路径
						下一级路径    /
						上一级路径    ../
			              绝对路径
超链接标签
	<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>           //从一个页面链接到另一个页面
								       //href:必须属性
								       //target:  _self 默认值
									       _blank 在新窗口中打开
								       //外部链接 href="http://..."
								          内部链接 href="....html"
								          空链接     href="#"
								          下载链接  href="....zip"     (链接的是文件 .exe   .zip)
								           网页元素链接 
								           锚点链接  (点击链接,快速定位到页面中的某个位置)
									              href="#名字"   找到目标位置标签,里面添加一个id属性=名字
注释
	<!--   -->      快捷键Ctrl+/
特殊字符
	空格符	&nbsp;		小于号	&lt;		大于号	&gt;	(重点记住)
	和号&	&amp;		人民币	&yen;		版权	&copy;
	注册商标	&reg;		摄氏度	&deg;		正负号	&plusmn;
	乘号	&times;		除号	&divide;		平方	&sup2;		立方	&sup3;
表格标签       //显示,展示数据
	<table>//定义表格的标签
		<tr>//定义表格中的行
			<th>    </th>//表头单元格标签:位于表格第一行或第一列,表头单元格里面的内容加粗居中显示    table head
			<td>    </td>//定义表格中的单元格  table date
		</tr>
	</table>
表格属性    //一般写在css中
表格结构标签     //包含在<table>标签中
	<thead>  </thead>   //表格头部区域,内部必须有<tr>标签
	<tbody>  </tbody>   //表格主体区域
合并单元格
	跨行合并:rowspan="合并单元格的个数"  //例如<td rowspan="2">  </td>
	跨列合并:colspan="合并单元格的个数"
	目标单元格(写合并代码)
		跨行:最上侧单元格为目标单元格
		跨列:最左侧单元格为目标单元格
	合并单元格之后,要删除多余的单元格
列表标签     //用来布局的
	无序列表
		<ul>//只能在<ul>标签中放<li>标签
			<li>列表项1</li>//<li>标签中可以容纳所有元素
			<li>列表项2</li>
			<li>列表项3</li>
			...
		</ul>
	有序列表
		<ol>//只能在<ol>标签中放<li>标签
			<li>列表项1</li>//<li>标签中可以容纳所有元素
			<li>列表项2</li>
			<li>列表项3</li>
			...
		</ol>
	自定义列表
		<dl>//只能在<dl>标签中放<dt>,<dd>标签
			<dt>名词1</dt>
			<dd>名词1解释1</dd>
			<dd>名词1解释2</dd>
			...
		</dl>
表单标签    //收集用户信息
	表单域//包含表单元素的区域
		<form action="url地址" method="提交方式" name="表单域名称">  //method="提交方式"   get/post
			各种表单元素控件
		</form>//定义表单域,以实现用户信息的收集和传递,会把他范围内的表单信息提交给服务器
`		<label for="">    </ label>     //<label>标签为<input>元素定义标注(标签)
					//<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
					//核心:<label>标签的for属性应当于相关元素的id属性相同
					//例如:<label for="sex">男</label>
					           <input type="radio" name="sex" id="sex" />
	表单控件(表单元素)//允许用户在表单中输入或者选择的内容控件
		<input type="属性值" />   //单标签,输入的意思,用于收集用户信息
				           //其他属性:name          定义input元素的名称           //name和value是每个表单元素都有的属性值,主要供后台人员使用    
					               value           定义input元素的值              
					               checked      规定input元素首次加载时应该被选中          //主要针对于单选按钮和复选按钮  checked="checked"  
					               						     //单选只能写一个,复选可写多个  一打开页面,就可以默认选中某个表单元素
					               maxlength  规定输入字段中的字符的最大长度
				           //type属性值:text             文本框,定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字
					                   password   密码框
					                   radio          单选按钮                 
					                   checkbox   复选框(多选按钮)                  //单选按钮和复选按钮要有相同的name值
					        	   submit       提交按钮,把表单数据发送到服务器
						   reset          重置按钮,把表单元素还原到初始的默认状态
						   botton       定义可点击按钮(后期结合js使用)
						   file             文件域:上传文件
						   hidden       定义隐藏的输入字段
						   image        定义图像形式的提交按钮
		<select>                                                  // 下拉表单元素:多个选项让用户选择,想节约空间时
			<option>选项1</option>	    <select>中至少包含一对<option>
			<option>选项2</option>	    在<>中定义selected="selected"时,当前选项即为默认选项
			<option>选项3</option>
			...
		</select>
		<textarea>                                              //文本域元素:用户输入内容较多的情况下,比如:留言板,评论
						   属性值:cols(每行中的字符数), rows(显示的行数),实际开发中用CSS来改变大小	
		</textarea>	       
	提示信息//



双标签,单标签
包含关系,并列关系

上一篇:元素水平居中的几种方式


下一篇:linux安装python