一、基础
web基础：
1.web标准（万维网-w3c）:
结构标准：HTML---决定屏幕上显示什么
表现标准：CSS---决定网页的内容布局及显示方式
行为标准：JavaScript（js）---决定网页上的动态效果
2.认识HTML
-
HTML是超文本标记语言 HyperText Markup Language （可以用来标记文本，图片，视屏，音频，flash，按钮，输入框的内容）
-
HTML不是编程语言，不会编译执行，而是一种标记语言 ,语法错误也不会报错导致程序不能往后面运行
-
HTML 使用标记标签来描述网页
-
HTML 文档包含了HTML 标签及文本内容
-
HTML文档也叫做 web 页面
3.HTML版本
广义的H5:指的是HTML5+CSS3+JS
狭义的H5:HTML5
4.HTML编程
(1)HTML标记语言对应的文件后缀--->html
(2)HTML的结构:整个HTML都是通过不同的标记（标签）来组成
5.标签（标记）
（1）双标签--->（常规标签）
<标签名 属性=属性值 属性=属性值>标签内容</标签名>
（2）单标签（自闭合标签）
<标签名 属性=属性值 属性=属性值/>
<标签名 属性=属性值 属性=属性值>
说明：
标签名：HTML标准中固定的（注意：<和标签名之间不能有空白/>）
属性：属性和标签名之间用空格隔开,以属性=属性值的形式存在,多个属性之间用空格隔开
(属性可以是HTML标准中的属性，也可以是自定义的属性)
标签内容：指的是开始标签和结束标签之间的内容（双标签才有），标签的内容可以是任何内容（字符串和其他）
<a></a>---a标签
<p></p>---p标签
<input>---input标签
补充：HTML语法中，不区分大小写（HTML/html/Html是一样的）
6.网页的结构
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<!--
Doctype:是对当前的HTML版本进行说明
HTML---默认版本（html5）
-->
<!Doctype HTML>
<!--html标签代表整个网页-->
<html>
<!--head标签：内容一般看不见的，并且里面的子标签是一些固定的
title标签---定义文档标题
meta标签---定义HTML文档中的元数据，要包括：name属性和http-equiv属性
link标签---定义一个文档和外部资源之间的关系
style标签---定义HTML文档的样式文件
script标签---定义了客户端的脚本文件
base标签---定义了页面链接标签的默认链接地址
-->
<head>
<!--设置网页标题（可见）-->
<title>HTML基础</title>
<!--charset：设置编码方式-->
<meta charset="utf-8"/>
</head>
<!--body标签中的内容，负责整个网页的显示部分-->
<body>
</body>
</html>
二、文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.标题标签(h1-h6)-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题4</h5>
<h6>我是标题4</h6>
<!--<h7>我是错误的标题格式</h7>-->
<!--
2.段落标签(p)
a.一个p标签对应一个段落
b.p标签的内容结束后会和其他的内容之间默认有一个空行
-->
<p >
面向未来，增强自主创新能力，最重要 的就是要坚定不移走中国特色自主创新道路，
坚持自主创新、重点跨越、支撑发展、引领未来的方针，
加快创新型国家建设步伐。½</p>
<!--3.文本符号
--- 空格
其他的查手册
-->
<p>
世界经济长远发展的动力源自创新。总结历史经验，
我们会发现，体制机制变革释放出的活力和创造力，科技进步造就的新产业和新产品，
是历次重大危机后世界经济走出困境、实现复苏的根本。
</p>
<!--4.换行标签(br)-->
<p>
世界经济长远发展的动力源自创新。总结历史经验，<br />
我们会发现，体制机制变革释放出的活力和创造力，科技进步造就的新产业和新产品，<br />
是历次重大危机后世界经济走出困境、实现复苏的根本。
</p>
<!--5.超链接(a)-->
<a href="http://www.baidu.com">百度一下</a>
<!--6.文字加粗(b/strong)
<b>加粗文字</b>
<strong>加粗文字</strong> -- 有强调的作用
-->
<p>
世界经济长远发展的动力源自创新。<hr />总结历史经验，<br />
我们会发现，<b>体制机制</b>变革释放出的活力和<strong>创造力</strong>，科技进步造就的新产业和新产品，<br />
是历次重大危机后世界经济走出困境、实现复苏的根本。
</p>
<hr />
<!--7.文字倾斜(i/em)
<i>倾斜文字</i>
<em>倾斜文字</em> -- 有强调的作用
-->
<p>
世界经济<i>长远发展</i>的动力源自创新。总结<em>历史</em>经验，<br />
我们会发现，<b><i>体制机制</i></b>变革释放出的活力和<strong>创造力</strong>，科技进步造就的新产业和新产品，<br />
是历次重大危机后世界经济走出困境、实现复苏的根本。
</p>
<!--8.水平线-->
<hr />
</body>
</html>
image.png
三、列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.有序列表-->
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
<!--2.无序列表-->
<ul>
<li>成都</li>
<li>重庆</li>
<li>北京</li>
</ul>
<!--3.自定义列表-->
<dl>
<dt>城市:</dt>
<dd>成都</dd>
<dd>合肥</dd>
<dt>省份:</dt>
<dd>福建</dd>
<dd>四川</dd>
</dl>
</body>
</html>
image.png
四、图片和链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.图片标签
src属性：图片地址（本地地址、网络地址）
本地地址：（1）绝对路径（2）相对路径（相对于工程目录）
注意：本地图片需要放在工程目录下的img文件夹下
title属性：图片的标题（鼠标停留在图片上，隔一段时间才显示出来）
alt属性：是图片加载失败后显示的提示信息
-->
<img alt="图片加载失败的提示信息" title="图片的名字" src="相对路径"/>
<!--2.超链接
网页上点击后可以跳转的标签都是超链接
href属性：跳转的地址（网页地址，本地地址）
网络地址：跳转到对应的网页
本地地址：当前工程其他的HTML文件路径
空串或者#：刷新页面回到网页的顶部
选择器：让网页滚动到图片的任意位置
target属性：
_self:在当前页面中打开href的地址
_blank:在新的页面中打开href的地址
(1)点击文字跳转
-->
<a href="" target="_top">百度一下</a>
<a href="">列表</a>
<a href="">图片</a>
<!--2.点击图片跳转-->
<a href="http://www.baidu.com">
<img src="imge" alt="" />
</a>
</body>
</html>
image.png
五、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--table标签代表整个表格
tr:行
td:列（一个td对应一个单元格）
一个表格中可以有多行，一行中有多列
1.table属性：
(1)border:设置整个表格中边框宽度
(2)width：设置整个表格的宽度
(3)height：设置整个表格的高度（每一行高度一样）
(4)align:center让整个表在其父标签的中居中
(5)cellspacing:单元格各单元格之间共间隙
(6)cellpadding:单元格和内容之间的空隙
(7)bgcolor: 背景颜色
2.tr属性：
(1)height：设置单独某一行的高度
(2)align:center 当前行里所有的单元格中的内容居中
(3)bgcolor: 背景颜色
3.td属性：
(1)width:设置某一列的宽度
(2)align:center 让某一个单元格中的内容居中
(3)bgcolor: 背景颜色
注意：所有的属性的值都要用双引号""括起来
-->
<!--创建一个2*3的表格-->
<table border="1" width="300" height="100" align="center" bgcolor="beige" cellspacing="0" cellpadding="10 1 5 20">
<tr align="center">
<!--第一行的第一列-->
<td>姓名</td>
<!--第一行的第二列-->
<td>成绩</td>
<!--第一行的第三列-->
<td>是否留级</td>
</tr>
<!--第二行-->
<tr align="center">
<td>张三</td>
<td align="center">90</td>
<td>否</td>
</tr>
<!--第三行-->
<tr cellpadding="10 1 5 20">
<td>李四</td>
<td>59</td>
<td>是</td>
</tr>
</table>
</body>
</html>
image.png
六、复杂表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复杂表格</title>
</head>
<body>
<!--
rowspan:合并行
colspan:列合并
-->
<!--表格1-->
<table border="1" width="300" height="200">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table border="1" width="400" height="300">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
image.png
二、常用标签
表单标签
表单标签：专门用来收集信息的标签
作用：可以提交表单中收集的信息
action属性：设置提交信息的位置
method属性：提交方式，可以是post,也可以是get
input标签（单标签） ---text（文本输入框）
1.是表单标签
2.type属性：text---普通的文本输入框
3.name属性：必须设置（1.用于提交信息）
4.value属性：标签内容
5.placeholder属性：占位符（提示信息）
6.maxlength:输入框最多输入多少个字符
7.readonly:readonly---输入框只读（不能往里面输入内容）
1. input标签：密码输入框
(1)type属性：password---输入的值是密文显示的
2. 单选框
(1)type属性：radio
(2)name属性：同一类对应的name值必须一样
(3)value属性：设置选中按钮提交的值，是个bool值，判断是否选中
(4)checked属性：设置为checked，让按钮默认处于选中状态
3. input标签：多选按钮
(1)type属性：checkbox
(2)name属性：同一类型对应的name值必须一样
(3)value属性：设置选中按钮提交的值
(4)checked:设置为checked,让按钮默认处于选中状态
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表单标签：
专门用来收集信息的标签
作用1：可以提交表单中收集的信息
action属性：设置提交信息的位置
method属性：提交方式，可以是post,也可以是get
-->
<form action="" method="post">
<!--
input标签（单标签） ---text（文本输入框）
1.是表单标签
2.type属性：text---普通的文本输入框
3.name属性：必须设置（1.用于提交信息）
4.value属性：标签内容
5.placeholder属性：占位符（提示信息）
6.maxlength:输入框最多输入多少个字符
7.readonly:readonly---输入框只读（不能往里面输入内容）
-->
<input type="text" name="username" value="" placeholder="请输入账号" maxlength="10"/>
<!--1. input标签：密码输入框
(1)type属性：password---输入的值是密文显示的
-->
<input type="password" name="password" placeholder="密码" value="" />
<br />
<!--2. 单选框
(1)type属性：radio
(2)name属性：同一类对应的name值必须一样
(3)value属性：设置选中按钮提交的值，是个bool值，判断是否选中
(4)checked属性：设置为checked，让按钮默认处于选中状态
-->
<input type="radio" name="sex" id="" value="boy" checked="checked"/><span>男</span>
<input type="radio" name="sex" id="" value="girl" /><span>女</span>
<br />
<!--3. input标签：多选按钮
(1)type属性：checkbox
(2)name属性：同一类型对应的name值必须一样
(3)value属性：设置选中按钮提交的值
(4)checked:设置为checked,让按钮默认处于选中状态
-->
<input type="checkbox" name="interest" id="" value="篮球" / checked="checked"><span>篮球</span>
<input type="checkbox" name="interest" id="" value="乒乓球" /><span>乒乓球</span>
<input type="checkbox" name="interest" id="" value="看电影" /><span>看电影</span>
<input type="checkbox" name="interest" id="" value="旅游" /><span>旅游</span>
<br />
<!--4.提交按钮-->
<input type="submit" name="" id="" value="提交" />
<br />
<!--5.input标签：普通按钮-->
<input type="button" name="" id="" value="登录" /><br />
<!--6.input标签：重置按钮
让当前所在的form中的所有表单相关标签对应的值，回到最初的状态
-->
<input type="reset" name="" id="" value="重置全部" />
<!--7.input标签：文件选择器-->
<input type="" name="" id="" value="" />
</form>
</body>
</html>
image.png
下拉菜单和多行文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<form action="" method="get">
<!--fieldset:
一个fieldset标签对应一个表单分组
legend标签：设置分组名
-->
<fieldset id="">
<legend>账号信息</legend>
<input type="text" name="username" id="username" value="" placeholder="用户名" />
<input type="password" name="username" id="username" value="" placeholder="密码" />
<input type="reset" name="" id="" value="重置1" />
</fieldset>
<fieldset id="">
<legend>反馈信息</legend>
<!--1.下拉菜单-->
<select name="city">
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="北京">北京</option>
<option value="大连">大连</option>
<!--selected:设置默认选中-->
<option value="青岛" selected="selected">青岛</option>
</select>
<!--2.多行文本域(多行文本输入框)
-->
<textarea name="message" rows="2" cols="100" placeholder="请输入意见..." maxlength="200">上次没有发送信息</textarea>
<input type="reset" name="" id="" value="重置2" />
</fieldset>
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
image.png
空白标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
html中的标签分为两大类：
（1）块级标签：一行只能有一个（不管标签的宽度是多少）
div标签，h1-h6标签,p标签,hr标签,列表的标签（dl标签，ul标签，ol标签，li标签），表格标签，form标签
（2）行内标签：一行可以有多个
a标签,image标签,input标签，下拉列表（select），多行输入框（textarea），span标签
span标签：
div标签：是空白标签，没有任何特殊意义（无语意标签）
-->
<div id="">
<a href="">百度一下</a>
</div>
<div id="">
<a href="">淘宝</a>
</div>
<div style="background-color: red; width: 100px;">
我是div1 <br />
我是div111
</div>
<span style="background-color: royalblue;">
我是span4
</span>
<div style="background-color: yellow; width: 90px;">
我是div2
</div>
<div style="background-color: palevioletred; width: 120px;">
我是div3
</div>
<span style="background-color: green;">
我是span
</span>
<span style="background-color: gold;">
我是span2
</span>
<span style="background-color: greenyellow;">
我是span3
</span>
<span style="background-color: royalblue;">
我是span4
</span>
</body>
</html>
image.png
网友评论