标签分类
行级标签(行级元素)
行元素(inline element): 多个元素在同一行上显示的元素
默认的行元素
超文本元素: a
- 图片元素: img
-
块级标签(块级元素)
-
默认的块元素
标题元素: h1~h6
- 段落元素: p
- 列表元素: ul ol dl li
- 布局元素: header nav main section article
- 无语义元素: div
常用标签及分类(元素)
文档结构标签
HTML 有自己固定的基本格式
<html><head><title></title></head><body></body></html>
示例
<html><head><title>我的第一个页面</title></head><body>主体内容</body></html>
HTML 标签名、属性名和大部分属性值统一用小写, 一般使用双引号
文本相关标签
无序列表ul(unorder list):表示列表项之间是没有先后顺序的
列表项:li(list item)
<!-- 无序列表 ul(unorder list)属性值 typedisc 实心圆(默认的)square 实心方块circle 空心圆列表项:li(list item)--><ul type="square"><li>web</li><li>gis</li></ul>
有序列表ol(order list):表示列表项之间是存在先后顺序的
列表项:li(list item)<!-- 有序列表 ol(order list) 属性 type 列表样式(1数字 A字母 I罗马字符) start 起始编号 列表项:li(list item) --> <ol type="1" start="2"> <li>中地数码</li> <li>新中地教育</li> <li>中地科技</li> </ol>描述列表:表示一个自定义的列表
<!-- 自定义列表 dl:列表的范围 dt:上层内容 dd:下层内容 --> <dl> <dt>中地数码</dt> <dd>财务部</dd> <dd>学工部</dd> <dd>教研部</dd> </dl>图片媒体标签
图片元素允许我们将图片放到网页中, 这样我们的网页就变得漂亮起来
语法:<img src="文件路径/文件名.后缀名" />文件路径:用来表示文件或者文件夹在计算机存储的位置
文件路径就是找到一个文件的途径. 有两个概念
路径分类
A-绝对路径(完整路径)
/宇宙/银河系/太阳系/地球/中国/武汉/
- 网络绝对路径: 从http://域名对应的地址开始查找, 直到找到目标文件为止
- 本地绝对路径: 从计算机的根盘符下开始查找, 直到找到目标文件为止
B-相对路径: 从当前文件开始查找, 直到找到目标文件为止
(就是相对当前文件的路径,把相同的地方去掉,不以盘符开头的路径,推荐使用相对路径,在本地和网络都可以打开)
相对路径图片标签又分为三种:
1,现在图片和文件在一个目录下面:
直接写图片名就行了 或者 ./图片名—>
<img src="gcd.jpg" alt="">
<img src="./gcd.jpg" alt="">
2,如果图片在html文件的下一个目录:
./目录名称/图片名称 或者 目录名称/图片名称
<img src="./img/01.jpg" alt="">
<img src="img/01.jpg" alt="">
3,如果图片在html文件的上一个目录:
../图片名称—>
<img src="../gcd.jpg" alt="gcd" title="mm" width="300px" height="300px">
<!-- ../代表上一层 -->
超链接标签
超链接可以使我们的文档跳转到任何其他的文档（或其他资源 resource）
语法：
<a href="统一资源定位符(URL)">显示信息</a>
什么是 URL
URL(Uniform Resource Locator): 统一资源定位符
URL 就是我们在浏览器地址栏输入的内容
超链接标签名 a
重要的属性
href 定义要跳转的资源(路径)
其他属性
target 定义打开方式
_blank 在新的窗口打开
_self 在当前窗口打开(默认)
站外链接
<!-- 站外链接:跳转到另一个网站或者应用 --> <a href="http://www.baidu.com" target="_blank">百度</a> <a href="tencent:///?q=1234567">点我咨询</a>站内链接
<!-- 站内链接:跳转到本网站的另一个页面 (路径写法跟图片的路径写法是一样的!!!)--> <a href="./03_新闻文本案例.html">新闻</a> <a href="./gcd.jpg">图片</a> <a href="./img/video.mp4">视频</a> <a href="./img/压缩包.rr">压缩包</a> <!-- 浏览器特性:能够识别,自动打开,不能识别,就下载 --> <br>锚链接 ```html
第一章
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores blanditiis corporis sit eius aliquid modi cumque aut? Alias adipisci tempore distinctio modi nemo sit placeat beatae ducimus rerum optio reprehenderit, quam animi non nobis voluptatum, quibusdam voluptatibus maxime veniam nulla inventore obcaecati! Cum adipisci voluptas iste placeat cumque, deserunt esse est? Dignissimos, nobis facilis vitae tenetur ipsum error, quidem cupiditate ex fuga aliquam animi consequatur natus voluptates minus accusantium debitis? Illum nam dicta sit deleniti nostrum rerum, at nemo ab fuga ipsum aliquam voluptatum aliquid non pariatur rem? Debitis ratione repellendus quisquam suscipit? Odio tempora praesentium atque eaque labore hic velit ratione, earum nostrum consectetur, excepturi dolore, asperiores dolorem deserunt. Voluptatem exercitationem quibusdam, labore voluptatum veritatis repudiandae laborum, itaque sunt ullam hic est cupiditate. Quisquam minima quidem reiciendis doloremque ipsum sed recusandae qui, mollitia minus dignissimos. Ducimus ut illum eius quae accusamus mollitia. Laboriosam ducimus in tempore! Soluta ab dignissimos perspiciatis tempore molestias ex obcaecati incidunt labore. Nobis molestias molestiae, quaerat nihil aspernatur accusamus amet aperiam at, asperiores minus ipsum reiciendis veritatis provident, rem suscipit accusantium. Fuga blanditiis dolorum amet quis reiciendis magnam nemo est quas porro sequi corporis optio dignissimos error, quia voluptatem tempora officiis ad. Quod numquam labore nobis, error deserunt iure earum velit. Dolorum laudantium sed excepturi molestiae dignissimos culpa quaerat commodi corporis obcaecati. Distinctio est numquam natus eaque dolorum eligendi mollitia facere nostrum suscipit, exercitationem doloribus corrupti quos nesciunt earum neque nam qui! Neque consectetur similique laborum vitae. Modi veritatis adipisci, aperiam ducimus odio sit possimus iusto repellat obcaecati nostrum distinctio laborum doloremque, sapiente cupiditate nulla nemo excepturi animi praesentium aliquid deserunt inventore. Magni, quas tempore. Optio error dolore iusto dolorum minima deleniti aut voluptate corporis placeat cupiditate natus blanditiis, ex odit unde incidunt praesentium dicta ipsum dignissimos. Quaerat, doloremque harum esse perferendis non repudiandae velit quas quod deserunt sed labore fuga dicta unde ea quam repellat! Numquam, minima assumenda? Atque eaque ipsa blanditiis, exercitationem corporis at quia rerum adipisci soluta sequi architecto. Animi modi ut eos sequi quas harum distinctio ipsam repellat sed neque iusto, voluptatem iure ex quisquam aspernatur possimus eum accusantium architecto minus voluptatibus aut? Perspiciatis dolores, blanditiis natus aspernatur vel ut quas illo dicta numquam facilis autem, optio quis ullam neque officia. Maiores culpa iusto consectetur voluptate hic explicabo enim facere impedit quam temporibus perferendis asperiores obcaecati praesentium aliquid sequi dicta quia officia rerum nulla sunt, ut veniam beatae. Explicabo voluptatum, doloribus suscipit nisi, molestiae eum sint ipsum, molestias velit nihil culpa sed consequatur asperiores! Quo ad hic dolorem. Provident fugit cumque tempora obcaecati nihil ipsum porro voluptatum quas repellat animi veniam, exercitationem, placeat perspiciatis vel voluptate et fuga nostrum quos corrupti! Repellendus error sed veniam molestiae minus ducimus quibusdam temporibus tempora, quisquam similique soluta laudantium quas. Quaerat illo recusandae ipsum excepturi quasi maiores facilis perspiciatis, totam sequi ducimus dignissimos, suscipit modi minima aspernatur eligendi cumque enim eum? Hic praesentium in exercitationem eaque incidunt architecto animi aliquid minima totam quas rerum doloribus esse voluptatum asperiores distinctio, adipisci excepturi ut voluptas soluta? Impedit!
第二章
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet eligendi similique tenetur deserunt tempore aut repellendus. Neque, veritatis, quidem perferendis eum distinctio eveniet praesentium consequuntur inventore magni nostrum fuga dignissimos harum! Obcaecati at neque a quos pariatur cum consequatur eveniet officiis, ex ipsam voluptate fugit deserunt repudiandae perferendis sapiente reiciendis ut perspiciatis iure beatae delectus eum corrupti? Placeat ea architecto reiciendis cum perspiciatis sed odio quia! Numquam itaque debitis officia adipisci, libero natus minus optio amet eligendi earum, dolores corrupti doloribus blanditiis aperiam magnam est. Aut molestiae repellat dolorem ipsa sed quis dolor provident ipsum minima cumque mollitia aliquam, nesciunt dolore veniam laborum quia facere excepturi eligendi quasi reprehenderit. Eveniet consequuntur ratione nulla ipsum in cumque labore eius, quas minima exercitationem. Velit fuga non in iste similique consectetur facere amet magni modi ad error, hic alias. Repellat alias dolor, enim eaque praesentium aut unde nisi tempore aliquid doloremque laborum ullam quos obcaecati nesciunt beatae eius. Neque possimus veniam, repellat aliquam a quod perspiciatis nostrum beatae. Iure error delectus aut aperiam ad voluptatem blanditiis vel minima expedita obcaecati velit, impedit ipsa nisi libero laboriosam voluptatibus animi consequatur, quibusdam perferendis, sequi unde cum sapiente molestias. Officiis odit minima, et voluptatum molestias sunt porro? Pariatur mollitia soluta quos veritatis assumenda cumque temporibus ut voluptatum accusantium nemo minus reprehenderit excepturi sint, porro esse nihil beatae numquam doloribus officia. Iure temporibus voluptatum consequuntur quisquam. Officia quaerat enim mollitia dicta? At vero quis pariatur sed nostrum blanditiis ratione quibusdam neque optio rem? Voluptatibus assumenda nisi fuga nobis. Voluptas facere voluptate necessitatibus facilis error nam aliquid, veniam adipisci debitis labore aperiam sapiente quam ipsa dolore molestias maiores, officia cumque temporibus ipsam a hic commodi fugiat minus incidunt. Commodi, explicabo et sunt ullam delectus eos quod nobis repellendus, sequi quasi tempore ex numquam optio ea obcaecati cupiditate omnis iste dicta, quo tempora? Porro ullam et ipsa quisquam aliquid vel amet laboriosam harum, rerum assumenda velit? Ex debitis aspernatur sit similique voluptatum consectetur non molestiae deserunt. Rerum dignissimos ratione quis ad quidem fugiat natus. Necessitatibus perspiciatis, dignissimos autem rem dolorum nam recusandae quaerat nobis fugit sunt quasi nihil repellat quibusdam corrupti omnis sequi. Debitis sapiente explicabo vel unde aut quisquam temporibus laboriosam repellat cupiditate quod eveniet nobis cum assumenda, mollitia iusto voluptate natus dolorem quos dolor illum cumque obcaecati. Ea ut non quos odio incidunt ex inventore. Nihil nam magni nulla impedit recusandae optio in iure voluptas, assumenda saepe, illo accusamus obcaecati quam sunt nemo, laborum cum rem atque eius dolorem pariatur dolor quis! Excepturi quisquam non, ad accusamus ab voluptas. Dolorem dolorum quibusdam ipsa illo reiciendis aperiam placeat ab pariatur alias dolores iure unde, necessitatibus libero blanditiis quae tenetur magnam ex voluptas ullam voluptatem veniam! Atque eaque vitae, expedita officiis sequi natus numquam! Laudantium, necessitatibus adipisci debitis earum quasi officiis excepturi eaque odio incidunt ipsam perspiciatis blanditiis asperiores numquam? Doloremque sint, est, soluta animi vel, magnam earum quas dolores iure non tempore quasi esse rem consequatur? Labore minima totam quod minus esse, laudantium eligendi dolore vero saepe aperiam.
<a id="top"></a>
<a href="#top">回到顶部</a>
<a name="lwHrk"></a>
## 布局相关标签
- 页头(header): 通常横跨于整个页面顶部有一个大标题 和/或 一个标志
- 导航(nav): 指向网站各个主要区段的超链接
- 主体(main): 中心的大部分区域是当前网页大多数的独有内容
- 侧边栏(aside): 一些外围信息、链接、引用、广告等
- 页脚(footer): 页脚放置公共信息（比如版权声明或联系方式）
<a name="EdW6C"></a>
### 1) header
- 可以是body的子元素, 表示网站的全局页头(常用)
- 也可以是section或article的子元素, 表示这个区域的页头
<a name="rmn7B"></a>
### 2) nav
通常是body的子元素, 表示网站的顶部导航
<a name="BKsMl"></a>
### 3) main
网页的主体部分, 每个页面只能用一个main. 且直接做为body的子元素, 最后不要把他嵌套到别的元素中
<a name="WgMbu"></a>
### 4) section 和 article
section 表示一组类似功能的区块. article 表示一篇文章
<a name="alyrh"></a>
### 5) footer
通常做为页面的页脚
<a name="PbtZv"></a>
### 6) 综合案例
<a name="TMiZc"></a>
### 7) 无语义元素
这里重点介绍两个元素
- **div 元素**
- **span 元素**
标准的制定者不可能把生活中的所有内容都语义化.<br />所以 80%的情况下, 不好确定某个部分的具体语义时, 一般使用无语义元素.<br />提示<br />无语义元素反而是使用的更多的元素, 在 HTML5 标准之前, 布局基本都是使用 div
```html
<body>
<!-- 简单模仿小兔鲜首页 -->
<!-- 头部区域 -->
<header>
<!-- 标题 -->
<h1>小兔鲜首页</h1>
<!-- 导航栏 -->
<nav>
<a href="">首页</a>
<a href="">生鲜</a>
<a href="">美食</a>
<a href="">餐厨</a>
</nav>
</header>
<!-- 主体区域 -->
<main>
<!-- 左侧:侧边栏 -->
<aside>侧边栏</aside>
<!-- 右侧:轮播图 -->
<aside>轮播图</aside>
<!-- 新鲜好物区域 -->
<section>
<article>商品一</article>
<article>商品二</article>
<article>商品三</article>
</section>
</main>
<!-- 页脚区域 -->
<footer>版权信息</footer>
</body>
表单标签（四大）
语法：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 get:把数据拼接到地址栏后面,相对的不安全,只能提交数据量比较小的数据 post:把数据封装到请求体中,相对的安全,可以提交大量的数据,一般用于文件上传 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
form 表单标签
定义了表单要提交的范围和提交的地址
重要的属性
action 设置表单要提交的地址(默认提交到当前页面)
method 设置表单要提交的方式(默认是get方式)
get:把数据拼接到地址栏后面,相对的不安全,只能提交数据量比较小的数据
post:把数据封装到请求体中,相对的安全,可以提交大量的数据,一般用于文件上传
input 表单项标签
根据type属性值的不同,呈现不同的样式,让用户输入或者选择
重要的属性
type
text 文本框(默认)
password 密码框(数据不以明文显示)
radio 单选框
checkbox 复选框
file 文件框(可以用于选择文件用来上传)
submit 提交按钮(提交页面数据)
reset 重置按钮(恢复到页面刚打开时的效果)
button 普通按钮(会配合后面的js一起使用)
checked<br /> checked 单选和复选框的选中
select 下拉选择框
option 选择框的选择项标签<br /> 重要属性<br /> selected selected 设置下拉选择框选中状态
textarea 文本域标签
相当于一个大的文本框,可以换行输入很多东西
重要数据
cols 列数
rows 行数
通用属性
name:表单项要想提交到后台,必须要有name属性
对于单选和复选框,可以使用name属性进行分组
value:对于单选和复选框,可以指定value属性的值,用于区分用户选择了哪一个选项(否则默认都是on)
可以设置submit.button,reset等元素的默认值
下拉选择项option标签如果没有value属性,提交到后台就是option标签体的内容,如果有value属性,提交到后台就是value属性的值
h5新增标签
label 为input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
button 按钮标签(更加见名知意),一般需要指定type属性<br /> <button> 元素比 <input> 元素更容易使用样式。<br /> 你可以在元素内添加 HTML 内容（像 <em>、<strong> 甚至 <img>），以及after 和before 伪元素来实现复杂的效果，而 <input> 只支持文本内容。
如果你的按钮不是用于向服务器提交数据，请确保这些按钮的 type 属性设置成 button。<br /> 否则它们被按下后将会向服务器发送数据并加载（可能并不存在的）响应内容，因而可能会破坏当前文档的状态
练习案例：
<!--
1,写一个提交页面,包含用户名和密码,并且使用get方式提交,一点登录就跳转到success.html页面
2,修改密码的属性,使其不以明文显示
3,添加性别(男,女)单选框和爱好(足球,篮球,乒乓球)复选框
4,给单选和复选框增加value属性,指定其被选中后提交的值
5,默认选中"男"和"足球"
6,让用户名默认显示"李四"
7,添加一个标签用来上传照片
8,添加一个重置按钮和普通按钮
9,添加一个学科(course)下拉列表框,有"java,php,python"3个选项
10,添加一个可输入10行10列的评价
11,默认选择"php"选项,文本域默认提示"请输入"-->
<body>
<form action="success.html" method="get">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="李四"> <!-- 表单中的数据要想提交到后台必须要有name属性 -->
<br>
<label for="password">密码:</label>
<input type="password" name="password" id="password">
<br>
性别: <input type="radio" name="gender" value="man" checked="checked">男
<input type="radio" name="gender" value="woman">女
<br>
爱好: <input type="checkbox" name="hobby" value="football" checked="checked">足球
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="pingpang">乒乓球
<br>
照骗: <input type="file" name="file">
<br>
学科: <select name="course">
<option value="01">java</option>
<option value="02" selected="selected">php</option>
<option value="03">python</option>
</select>
<br>
评价: <textarea name="textarea" cols="30" rows="10" placeholder="请输入"></textarea>
<br>
<!-- <input type="submit" value="提交"> -->
<button type="submit">提交</button>
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>
</body>
表格标签
相关标签
table 定义一个表格<br /> tr 定义一个表格(table row)<br /> td 定义表格中的单元格(table date)<br /> th 定义行中的表头(table head)相关属性
table相关属性<br /> width 宽度<br /> height 高度<br /> border 边框<br /> cellpadding 内边距 <br /> cellspacing 外边距tr相关属性
align 定义内容的显示方式td相关属性
rowspan 单元格跨行<br /> colspan 单元格跨列
| 属性 | 值 | 说明 |
|---|---|---|
| align | left center right |
规定表格相对周围元素的对齐方式。 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname |
规定表格的背景颜色。 |
| border | pixels | 规定表格边框的宽度。 |
| cellpadding | pixels % |
规定单元边沿与其内容之间的空白。 |
| cellspacing | pixels % |
规定单元格之间的空白。 |
| width | % pixels |
规定表格的宽度。 |
表格的简单应用：
<table width="800px" height="300px" border="1px" cellpadding="0px" cellspacing="0px" >
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>毕业院校</th>
</tr>
<tr align="center">
<td>小三</td>
<td>18</td>
<td>女</td>
<td>家里蹲大学</td>
</tr>
<tr align="center">
<td>小四</td>
<td>18</td>
<td>女</td>
<td>家里蹲大学</td>
</tr>
<tr align="center">
<td>小五</td>
<td>18</td>
<td>女</td>
<td>家里蹲大学</td>
</tr>
</table>
表格的跨行跨列：
<body>
<table width="800px" height="300px" border="1px" cellpadding="0px" cellspacing="0px" >
<tr>
<th colspan="4">学员信息</th>
</tr>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>毕业院校</th>
</tr>
<tr align="center">
<td>小三</td>
<td>18</td>
<td>女</td>
<td rowspan="3">家里蹲大学</td>
</tr>
<tr align="center">
<td>小四</td>
<td>18</td>
<td>女</td>
</tr>
<tr align="center">
<td>小五</td>
<td>18</td>
<td>女</td>
</tr>
</table>
</body>
若有收获，就点个赞吧
0 人点赞
