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/>换行
缩进,空格
权重标签:<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 密码框
占一个英文的长度   占一个中文的长度
-->
<from action=" " method=" GET">
用户名:<input type="text" /><br />
密 码:<input type="password" /><br />
性 别:男<input type="radio" name="sex"/>女<input type="radio" name="sex"/><br />
爱 好:学习<input type="checkbox" />  看书<input type="checkbox" />  编程<input type="checkbox" /><br />
省 份:<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>