HTML常用标签小结1(表格和无序列表)

		 1.HTML 文件由浏览器执行
		2.HTML主要用于网页布局(骨架)
		3.文件名必须以.html结尾
		4.所有内容都应包含到HTML中
		5.head部分包含网页的配置信息,包括标题
		6.body标签是真正展示在浏览器中的
		meta 自结束标签---网页的配置信息
		<!DOCTYPE html>   作用:告诉浏览器这是html文件
		<meta name="keywords" content="西华"/> 提高网页被搜索引擎命中的概率
		<meta name="author" content="xxx" />
		<h></h>标题标签:会对字体加黑加粗,h1~h6六个等级,加黑加粗的效果逐级递减
		<hr/> 自结束标签    :显示一条横线
		<p></p>段落标签:
		<br/>换行
		&nbsp;  缩进,空格
		权重标签:<b></b>加黑,加粗
				<i></i>斜体显示
				<del></del>中划线
				<u></u>下划线
		注意:权重标签之间可以嵌套使用		
		图片:<img src="" alt=""/> src 告诉图片的位置
			1.绝对路径   2.相对路径   3.网络资源
			width="" 宽  height="" 高  px  像素
		行类标签:标签与标签之间不会换行
		块状标签:标签与标签之间会换行
		alt图片加载失败的时候显示
		列表标签:
			1.无序列表 <ul><li></li></ul>
			特点:在每一列的前面加一个小黑点,每一个li默认会换行
			2.有序列表  <ol><li></li></ol>   可以使用type属性对排序的序号进行修改
			3.自定义列表<dl><dt><dd></dd></dt></dl>
				特点:所有的列都定义在dl里面,所有的标题都定义在dt里面
			
		超链接:<a href="" ></a>  href属性:资源路径
		
		资源路径:1.本地资源:本地存在的一些页面(本地存在的一些HTML文件)
				 2.网络资源:
		注意:设置访问点击资源  1.文字  2.图片
		属性2:target
		     _self  默认在当前页面打开
		     _blank   在新窗口打开
		     
		锚点学习:在当前页面对资源的定位
		<a href="#">回到顶部</a>   当点击链接时,会对页面进行重新加载,就会回到开始的地方
		
		访问锚点
		<a href="#no1">第一章</a>
		<a href="#no2">第二章</a>
		<a href="#no3">第三章</a>
		定义锚点
		<a name="no1"></a>
		<a name="no2"></a>
		<a name="no3"></a>
		
		表格:<table><tr><td></td></tr></table>
		边框属性:border
		每一个tr height
		第一行每一个td width,后面的单元格会自动撑开
		设置边框颜色:bordercolor  设置边框颜色的方式:1.
		
		cellspacing :设置内边框到外边框的距离
		cellpadding  :设置内容到边框的距离
		
		单元格合并:
		首先确定是行合并还是列合并
		行合并:td   rowspan
			1。在代码中找到对应的单元格
			2.删除被合并的单元格代码
		列合并:td   colspan
			1。在代码中找到对应的单元格
			2.删除被合并的单元格代码
			3.如果是第一行中操作,进行宽度调整
		
		表单from
		作用:搜集页面上的数据往指定的地方发送
		属性:action  指定数据发送的路径
			 method  get/post
	    		post:发送post,可以参数量可以比较大
	    		get:发送get请求,参数的量往往比较小,参数的值可以在浏览器地址中显示
	输入框:
	input type  text:文本框   password  密码框 
	            radio单选框   checkbox  多选框   submit 表单提交
	select option  下拉列表
	
	注意:提交的是value对应的  与name值组成一个键值对
		常见的块级元素:
			<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table> 、<form>
		常见的行内元素:
			<a>、<span>、<br>、<i>、<label>、<input>、 <img>
		
		<span></span> 显示文本
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" /><!--告诉浏览器以UTF-8编码进行解析HTML5的标准 -->
                                
		<title></title>
	</head>
	<body>
		<h1>Hello World!</h1>
		<hr />
		<img src="img/IMG_5811.JPG" width="100px" height="80px" alt="风景"/>
		
		<img src="https://www.baidu.com/link?url=ILXQwXZHZ_z0vECy01czAF7G8F5VXj22g_6PzKZmbR0_9fDFLcDaNJrW9U--zIVzHZRhG7YDA37CQW2U7SHQqP9Zi_RXBnqF8WhR8zh2eIwKOhk9EjgSzrzrC4rzIEIBLV1pFZfQsw9p4Iko89Z8IjhmS3zPn4VYZsTVAlobkg-W_WKBWHp-4u658Rz-xQOYiX6cXbrRzuWABLcCp1V7YlYexURNJLT9hiKKfPpfGu1uRiyFoTD0pZ17kHyQh5NFzC27BsXTazXQuLS2GgTfF3qP2bod-ao5Oz7LgQv9YknZkuUFj7SpqsiSf0KMOJ2F_-2pLqLrFAWNu2OVYtTW65pUd41SvvzY7E4VqAM-oV740fWs5XXTMAJQCpHgMXq0vwDBpPaFMmgEy0bxyus2bmDqt5YVdWrVqLEexyfX_r-bcuKyrS2eJE0gOD2ANtfj7mac3rr_Ex-r78vh_d454v6jYOP53E_UMLIGbe17IMznBUqH1_TtGfBU_vr-A2rCnhp6TAHbYTemjpy7c0fKXKpmx3zmdNL2ut0xrmoABT9050C4rABmPpNAyvvWef94yrLx5taMDKtAZYqqLbjLIJUs9-2iFf2r_75Vb_vDGAQa75IgU8KPyG_GRN2Y_3jIg7QTXeBbRSlKiWumd8pL_ZX8vn-QhmagwgYcQ0EkSya&timg=https%3A%2F%2Fss0.bdstatic.com%2F94oJfD_bAAcT8t7mm9GUKT-xh_%2Ftimg%3Fimage%26quality%3D100%26size%3Db4000_4000%26sec%3D1547609659%26di%3D22aeaf30cb84ecd0dc658c5665313b08%26src%3Dhttp%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1603%2F14%2Fc0%2F19168563_1457886452124.jpg&click_t=1547609726172&s_info=1520_747&wd=&eqid=d3070c7a0003213e000000055c3ea63b" width="100px" height="80px" alt="风景"/>
		<ul>
			<li>成都</li>
			<li>西安</li>
			<li>丽江</li>
		</ul>
		<h2>三巨头</h2>
		<ol>
			<li>罗斯福</li>
			<li>斯大林</li>
			<li>丘吉尔</li>
		</ol>
		<dl>
		<dt>三大编程语言</dt>
		<dd>Java</dd>
		<dd>C++</dd>
		<dd>GO</dd>
		<dt>三大Java框架</dt>
		<dd>Spring</dd>
		<dd>SpringMVC</dd>
		<dd>Springboot</dd>
		</dl>
		<!--<a href="img/IMG_5811.JPG"><img src="img/IMG_5811.JPG" width="100px" height="80px"></a>-->
		<h3>跳转网络资源</h3>
		<a href="http://www.baidu.com"><img src="img/IMG_5811.JPG" width="100px" height="90px"></a>
		<h3>表格</h3>
		<table border="1px" bordercolor="blank">
			<tr >
			<td >高数</td>
			<td>线代</td>
			<td>离散</td>
			
			</tr>
			<tr >
			<td >99</td>
			<td>98</td>
			<td>88</td>
			
			</tr>
		</table>
		<table border="1px" bordercolor="blank">
			<tr height="20px">
				<td width="50px"rowspan="2"></td>
				<td width="50px"></td>
				<td width="100px"colspan="2"></td>
				
			</tr>
			<tr height="20px">
				
				<td rowspan="2"></td>
				<td rowspan="2"></td>
				<td></td>
			</tr>
			<tr height="20px">
				<td></td>
				
				
				<td></td>
			</tr>
		</table>
		<!--
           表单from
		作用:搜集页面上的数据往指定的地方发送
		属性:action  指定数据发送的路径
        	 method   
        输入框:input     
        	type 属性:text  文本框    password  密码框
        	&nbsp;  占一个英文的长度  &emsp; 占一个中文的长度
        	
        -->
		<from action=" " method=" GET">
			用户名:<input type="text" /><br />
			密&nbsp;&nbsp;码:<input type="password" /><br />
			性&emsp;别:男<input type="radio" name="sex"/>女<input type="radio" name="sex"/><br />
			爱&emsp;好:学习<input type="checkbox" />&emsp;&emsp;看书<input type="checkbox" />&emsp;&emsp;编程<input type="checkbox" /><br />
			省&emsp;份:<select name="" id="">
					<option value=""></option>
					<option value="1">四川</option>
					<option value="2">上海</option>
				</select><br />
			自我介绍:<textarea name="" id="" cols="30" rows="10"></textarea><br />
			<input type="button"  value="注册"/><br />
			
		</from>
		
		
	</body>
</html>

发布了81 篇原创文章 · 获赞 25 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_43090158/article/details/96355978