一.html常用标签
1.什么是 html
（注意HTML语言不会报错）
2.常用标签
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height:2000px;">
<a href=""id="box">我是顶部的a标签</a>
<!--h1 在一个页面上出现一次h2-h6自己分配-->
<h1>helloword</h1>
<h2>helloword</h2>
<h3>helloword</h3>
<h4>helloword</h4>
<h5>helloword</h5>
<h6>helloword</h6>
<h2>段落标签</h2>
<p>
  Python是一种计算机程序设计语言。是一种动态的、面向对象的脚本语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。
</p>
<p>
Python是一种计算机程序设计语言。是一种动态的、面向对象的脚本语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。
</p>
<h2>粗体标签</h2>
<!--b 标签只是物理加粗strong不仅加粗还利于seo搜索-->
<!--br 换行标签hr水平线标签-->
<strong>我是strong标签</strong><br>
<b>我是b标签</b><hr>
我是正常的
<h2>斜体标签</h2>
<!--i 标签只是斜体em不仅斜体还利于seo搜索-->
<em>我是em标签</em>
<i>我是i标签</i>
我是外面的
<em><b>lalal</b></em>
<b><em>hhhh</em></b>
<h2>a标签</h2>
<ahref="http://www.baidu.com"target="_blank">去百度</a>
<!--href 是a标签的标签属性-->
<!--
target属性
_self当前页面打开默认
_blank在新窗口打开
-->
<ahref="#box">去到顶部</a>
<!--
只有拥有name属性的a标签才有锚点
其他标签可以通过id属性实现锚点
-->
<a href="javascript:void(0);">死链接</a>
<ahref="#">#回到顶部</a>
<h2>特殊符号</h2>
<p>
大于号：---><br>
小于号：---<<br>
空格符号：---12 34<br>
空白位：---12 34<br>
版权符号：---©<br>
</p>
<!--
HTML书写规范
1.名字用小写字母
2.以英文开头，可以包含英文字母，数字，_，-，不能使用中文
3.驼峰命名
className第二个单词首字母大写
4.id命名
id只能有一个名字，而且在页面中相同的名字只能出现一次，相当于身份证号码一样
5.class命名
class可以出现多次，而且相同的名字可以有多个，相当于人名一样
-->
</body>
</html>
程序实现
3.Html 基本模板
单标签： 有头无尾 <h1>
双标签： 有头有尾 <h1> </h1>
例:
<!DOCTYPEhtml>#告诉浏览器我是html文件
<htmllang="en">
<head>
<metacharset="UTF-8">#文件编码
<title>初识HTML</title>#文件标题
</head>
<body>#可视文件
<h1>你好啊，小可爱！</h1>>
<!--Ctrl+/快捷注释-->
<!--Ctrl+/快捷注释-->
<!---->
<!--什么是HTML？-->
<!--HTML是用来描述网页的一种语言。-->
<!--HTML指的是超文本标记语言(HyperTextMarkupLanguage)-->
<!--HTML不是一种编程语言，而是一种标记语言(markuplanguage)-->
<!--标记语言是一套标记标签(markuptag)-->
<!--HTML使用标记标签来描述网页-->
<!--HTML标签(元素)-->
<!--HTML标记标签通常被称为HTML标签(HTMLtag)。-->
<!--HTML标签是由尖括号包围的关键词，比如<html>-->
<!--HTML标签通常是成对出现的，比如<b>和</b>-->
<!--标签对中的第一个标签是开始标签，第二个标签是结束标签-->
<!--开始和结束标签也被称为开放标签和闭合标签-->
<!--HTML文档=网页-->
<!--HTML文档描述网页-->
<!--HTML文档包含HTML标签和纯文本-->
<!--HTML文档也被称为网页-->
<!--Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。-->
<!--浏览器不会显示HTML标签，而是使用标签来解释页面的内容.-->
<!---->
</body>
</html>
程序实现
4.图片 /音频 /视频 /列表标签
4.1 图片
图片标签属性：
- src 定义图片路径 相对、绝对
- alt 图片描述，用于seo搜索 当图片路径错误的时候 会显示在页面上
- width 定义图片宽度
- height 定义图片高度
- title 鼠标划入 有提示
- 当width/height只给一个值的时候，另一个值等比例缩放，然后不给默认图片大
注意：
src: 路径写法,不能出现中文
相对路径: 从本地文件(该代码所在文件的当前位置)出发寻找到目标文件
./ (当前目录)
../(上级目录)
../../(上上级目录)类推
绝对路径:
从本地: D:/project/demo/pic.jpg
从网络: :https://www.baidu.com/img/blabla.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="https://res.shiguangkey.com/file/201808/08/20180808171627888011622.jpg?x-oss-process=image/format,webp" alt="我是一只小小鸟" width="300" height="200" title="数据分析">
<img src="img/01.jpg" alt="">
<!--
src 定义图片路径 相对、绝对
alt 图片描述，用于seo搜索 当图片路径错误的时候 会显示在页面上
width 定义图片宽度
height 定义图片高度
title 鼠标划入 有提示
当width/height只给一个值的时候，另一个值等比例缩放，然后不给默认图片大小
-->
</body>
</html>4.2 音频
音频标签用法与图片用法基本一致:
audio标签的作用就是在网页上展示一个音频文件，这个标签也是HTML5时代的一个代表性存在
src=“音频地址”:src是sourse的缩写，表示我们需要显示的音频文件所在的位置
controls=“controls”：这是音频文件的控制按钮区域
<audio src=" /i/horse.ogg " controls=" controls "></audio>
4.3 视频
video标签的作用就是在网页上展示一个视频
文件，这个标签也是HTML5时代的一个代表性存在
src=“视频地址”:src是sourse的缩写，表示我们需要显示的视频文件所在的位置controls=“controls”：这是视频文件的控制按钮区域
<audio src=" /i/movie.ogg " controls=" controls "></audio>
4.4 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>无序列表</h2>
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- type
disc 默认 小黑圆点
circle 空心圆
square 小方框
-->
<h2>有序列表</h2>
<!--ol>li{$}*3 tab-->
<ol type="a">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!--
1 1 2 3 4 默认
a a b c d
A A B C D
I
i
-->
<h2>自定义列表</h2>
<dl>
<dt>前端</dt>
<dd>html</dd>
<dd>css</dd>
<dd>js</dd>
</dl>
</body>
</html>程序实现
5. 行内和块级不同点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background: red;
width: 200px;
height: 50px;
/*display: inline; */
}
span{
background: rebeccapurple;
width: 200px;
height: 50px;
/*display: block;*/
display: none;
}
li{
width: 100px;
height: 50px;
background: skyblue;
display: inline-block;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span11111</span>
<span>span2</span>
<p></p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!--
块级元素div display:block;
可以包含任何块和行内元素
独占一行，支持设置宽高
如果没有设置宽高，高度由内容撑开，宽度默认浏览器宽度
没有内容，在网页上肉眼看不到东西，但是审查元素，宽度是浏览器宽度，高度0
行内（内联）元素span display:inline;
可以和其他行内元素位于同一行
行内元素不要包块级元素
不支持设置宽高
内容撑开宽高
行内块元素 display:inline-block;
块级元素可以横排展示
行内元素可以设置宽高
元素既能设置宽高 也能排在一排
display:none
隐藏元素,包括他的子标签，在页面中不占位置，等同于消失了
-->
</body>
</html>程序实现
6.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
/*border-collapse: separate; */
border-collapse: collapse;
/*
collapse 边框合并，如果相邻的话，共用一个框
separate 默认值，边框分开，不合并
*/
/*文字水平居中*/
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<caption><b>学生信息表</b></caption>
<thead>
<tr>
<!--th 文件加粗 水平居中-->
<th>姓名</th>
<th>班级</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>吴成</td>
<td colspan="2">18</td>
<!--<td>18</td>-->
</tr>
<tr>
<td>倪启斌</td>
<td rowspan="2">29</td>
<td>20</td>
</tr>
<tr>
<td>摇滚男孩爱摇滚</td>
<!--<td>29</td>-->
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>程序实现
7.表单
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
textarea{
width:300px;
height:30px;
/*禁止拉伸*/
/*resize:none;*/
/*垂直方向可以拉伸*/
/*resize:vertical;*/
/*水平方向可以拉伸*/
resize:horizontal;
}
</style>
</head>
<body>
<form action="" method="post" autocomplete="off">
<!--action规定当前提交表单向何处发送表单数据-->
<!--method默认getpost-->
<!--autocomplete自动完成，on输入框会提示off输入框不会提示-->
<!--namevalue-->
<!--?name=value&name=value....-->
<!--?user=root&psd=safdasfasdgf&gender=on&hobby=on&hobby=on&hobby=on-->
账号：<input type="text" name="user" placeholder="请输入你的账号"><br>
密码：<inputtype="password"name="psd"required><br>
<!--required必填字段-->
文件上传：<inputtype="file"><br>
<!--name-->
单选框：<input type="radio"name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender" disabled>保密<br><br>
<!--checked默认选中-->
<!--disabled禁止选中-->
多选框：<input type="checkbox" name="hobby">睡觉
<input type="checkbox" name="hobby">吃
<input type="checkbox" name="hobby">玩手机
<input type="checkbox" name="hobby">看书
<input type="checkbox" name="hobby" id="box" checked>
<label for="box">运动</label><br><br>
下拉框：
<select name="xz">
<!--size规定下拉列表中可见选项的数目-->
<!--selected规定在option里面默认展示第几项-->
<option value="1">长沙</option>
<option value="2">北京</option>
<option value="3"selected>上海</option>
<option value="4">苏州</option>
<option value="5">随州</option>
</select><br><br>
文本域：
<textarea> </textarea><br><br>
提交：<input type="submit" value="提交数据"><br><br>
重置：<input type="reset" value="重置"><br><br>
按钮：<inputtype="button" value="button按钮"><br><br>
</form>
</body>
</html>
8.表格例子1 --- 书籍介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
color: #ddd;
}
li{
/*去掉li标签前面的小东西 比如默认小黑原点*/
list-style: none;
}
div{
display: inline-block;
}
ul{
display: inline-block;
/*垂直对其 top middle baseline bottom 给数值*/
/*vertical-align: top;*/
}
img{
width: 126px;
}
</style>
</head>
<body>
<h1>毒液：致命守护者 Venom <span>(2018)</span></h1>
<div>
<img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537158013.webp" alt="">
</div>
<ul>
<li><span>导演:</span><a href="">鲁本·弗雷斯彻</a></li><br>
<li><span>导演:</span><a href="">鲁本·弗雷斯彻</a></li><br>
<li><span>导演:</span><a href="">鲁本·弗雷斯彻</a></li><br>
<li><span>导演:</span><a href="">鲁本·弗雷斯彻</a></li><br>
</ul>
<!--
div h1-h6 ul li ol li
span strong b em i
-->
<!--div*5 tab-->
<!--ul>li*3-->
</body>
</html>程序实现
9.表格例子2 --- 自我介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>--自我介绍--</title>
<style>
table{
border-collapse:collapse;
display: inline-block;
height: 250px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr><h1>--自我介绍--</h1></tr>>
</thead>
<tboby>
<tr><img src="http://p1.ifengimg.com/a/2016_23/8dbc27e13f7a530_size73_w451_h600.jpg" alt="吴彦祖自我简介"
width="200" height="250" title="吴彦祖照片"></tr>
<tr> <th>姓名:</th><td>吴彦祖</td></tr>
<tr><th>性别:</th><td>男</td></tr>
<tr><th>出生日期:</th><td>19--.0-.16</td></tr>
<tr> <th>国籍:</th> <td> 中国</td></tr>
<tr><th>籍贯:</th><td>***市...</td></tr>
<tr><th>婚姻状况:</th><td>未知</td></tr>
<tr><th>兴趣爱好:</th><td>健身,网球,音乐</td></tr>
</tboby>
</table>>
</body>
</html>程序实现
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
