一.web标准的制定
1.W3C万维网联盟(Word wide Web Consortum)
2.Web标准的组成:html,css,js
.结构化标准语言(html,xml)
.表现标准语言(css)
.行为标准语言(js)
二.html学习
1.文档声明与字符编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>唐诗三百首</title>
</head>
<body>
<center>十年生死两茫茫</center>
</body>
</html>
<!DOCTYPE html>:文档声明标签
<html lang="en">:设置网页语言
<meta charset="UTF-8">:设置字符编码
2.html常用标签
(1)文本标题(h1-h6)
<body>
<h1>静夜思</h1>
<h2>李白</h2>
<h3>窗前明月光</h3>
<h4>垂死梦中惊坐起</h4>
<h5>无人只是荔枝来</h5>
<h6>jj</h6>
</body>
(2)段落标签:p
<p>段落文本内容</p>
标识一个段落(段落与段落之间有间隔)
<p>人有生老三千几</p>
<p>惟有相思不可医</p>
(3)换行标签(br/)
<br/>
强制换行
(4)水平线标签(hr/)
<hr/>
<p>人有生<br>老三千几</p>
<hr/>
<p>惟有相思不可医</p>
(5)加粗标签
<b>内容</b>
<strong>内容</strong>推荐
(6)倾斜标签(em)
<em>文本内容</em>
(7)加粗并且倾斜
<strong><em>内容</strong></em>
代码实现:
<p>
<strong>城南小陌有逢春</strong>
</p>
<p>
<em>之间桃花不见人</em>
</p>
<p>
<strong><em>垂死梦中惊坐起</em></strong>
</p>
结果图展示:
(8)删除线标签
<s>内容</s>
<del>内容</del>推荐
代码实现:
<p>
不要<s>998</s> 不要 <del>99</del> 只要9.9
</p>
结果图:
(9)扩展
<u>文本</u>:文本下划线
<sub></sub>下标
<sup></sup>上标
<p>
不要<s>998</s> 不要 <del><u>99</u></del> 只要9.9
</p>
<p>
垂死<sub>[1]</sub>梦中惊坐起
</p>
<p>
梦中<sup>[2]</sup>惊坐起
</p>
<p>
<sub>[1]垂死:</sub>睡觉
</p>
<p>
<sup>[2]梦中:</sup>做梦
</p>
3.简单示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度词条</title>
</head>
<body>
<h1>唐诗三百首</h1>
<hr>
<h2>江城子·乙卯正月二十日夜记梦</h2>
<p>
<strong>十年生死两茫茫,不思量,自难忘。</strong><br><strong><em>千里孤坟,无处话凄凉。</em></strong><br><u>纵使相逢应不识,尘满面,鬓如霜。</u>
</p>
<p>
<em>夜来幽梦忽还乡,小轩窗,正梳妆。</em><br>相顾无言<sup>[1]</sup>,惟有泪千行<sub>[2]</sub>。<br><del>料得年年肠断处,明月夜,短松冈。</del>
</p>
</body>
</html>
结果图: 4.hr水平线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--color属性:设置水平线的颜色-->
<hr color="green" >
<hr color="red" >
<hr color="yellow" >
<!--width属性:设置水平线的像素-->
<hr color="green" width="600">
<hr color="green" width="200">
<!--align属性:设置位置-->
<hr color="green" width="200" align="left">
<hr color="green" width="200" align="right">
<hr>
<!--noshade取消水平线阴影-->
<hr noshade>
</body>
</html>
结果示意图:
5.特殊符号
特殊符号 | 解释 |
尖角号 | <:左尖角号 >:右尖角号 |
空格 | &emsp:宽度为一个中文字符的宽度,不受中文字体的影响 |
版权 | © |
6.div和span标签:
div:没有具体含义用来划分页面,独占一行
span:没有实际意义,用于文本独立修饰,内容多宽就占多少位置
7.列表
(1)有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--1.ol内只能放置li标签,li内可以放置任意标签
2.数字可以随意生成
type:1,a,A,i,I
start:取值只能是数字-->
<ol type="a" start="3">
<li>打开冰箱</li>
<li>把大象放进去</li>
<li>关闭冰箱</li>
</ol>
</body>
</html>
(2)无序列表
<body>
<!--1.ul内只能放置li标签,li内可以放置任意标签
2.默认的是实心圆
3.type:实心圆disc,circle空心圆,square方框 none没有-->
<ul type="none">
<li>打开冰箱</li>
<li>把大象放进去</li>
<li>关闭冰箱</li>
</ul>
</body>
(3)自定义列表
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
8.图片标签的路径
<body>
<img src="E:\web\img\b+tree.png">
</body>
9.图片标签的属性
<body>
<!--
1.width,height:设置图片的宽和高
2.title:鼠标悬浮文字提示
3.alt:图片加载失败文字提示
-->
<img src="E:\web\img\b+tree.png" width="200px" height="200px" title="b+树" alt="图片">
</body>
10.超链接标签
作用:实现不同页面的跳转
语法:<a href="路径" title="鼠标悬浮提示" target="规定打开文档位置">内容</a>
Target:规定何处打开文档
(1)默认在当前窗口
(2)target="-blank" 新窗口
<body>
<!--1.href:要跳转页面的地址
2.target:规定页面打开的位置-->
<a href="https://www.baidu.com/?tn=85070231_7_hao_pg">百度</a>
<a href="https://www.baidu.com/?tn=85070231_7_hao_pg" target="_blank">百度</a>
<a href="E:\web\无序列表.html">无序列表</a>
<a href href="https://blog.csdn.net/weixin_50735831?spm=1000.2115.3001.5343">
<img src="E:\web\img\hadoop.jpg">
</a>
11.表格
(1)表格标签:
1.table:表格
2.tr:table中的tr数表示表格的行数
3.td:tr中td的数量表示表格的列数
<body>
<!--1.table:表格
2.table中的tr数表示表格的行数
3.tr中td的数量表示表格的列数-->
<table >
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
(2)表格的属性
width:宽度
height:高度
border:边框
bordercolor:边框颜色
bgcolor:背景颜色
水平对齐:align="left" or "right" or "center"
cellspacing="单元格之间的宽度"
cellpadding="单元格与内容之间的空格"
<body>
<!--1.table:表格
2.table中的tr数表示表格的行数
3.tr中td的数量表示表格的列数-->
<table width="200px" height="100px" border="1px" bordercolor="red"
bgcolor="gree" align="center" cellspacing="0" cellpadding="10px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
(3)tr属性
高度:height
背景颜色:bgcolor
align="center"or "left" or"right"
valign="top" or "middle" or "bottom"
(4)td属性
宽度:width
高度:height
背景颜色:bgcolor
align="center"or "left" or"right"
valign="top" or "middle" or "bottom"
(5)表格合并
colspan:合并列
rowspan:合并行
<body>
<table border="1px" width="300px" height="300px" align="center" bordercolor="yellow"
cellspacing="0px" bgcolor="grey">
<tr>
<td>ob</td>
<td colspan="2" rowspan="2">上单</td>
<!--<td>剑姬</td>-->
</tr>
<tr>
<td rowspan="2">中单</td>
<!--<td colspan="2">亚索</td>-->
<!--<td>阿卡丽</td>-->
</tr>
<tr>
<!--<td>盲僧</td>-->
<td colspan="2">打野</td>
<!-- <td>剑圣</td>-->
</tr>
</table>
</body>
三.表单:
3.1作用:收集用户信息
3.2表单的组成
1.表单域
表单域是一个包含表单元素的区域;
html中<form>标签定义表单域,收集用户信息,<form>会将他表单范围内的元素提交给服务器。
2.表单元素
1.input:输入表单元素
2.select:下拉表单元素
3.textarea:文本域表单元素
(1)<input>表单元素
<input type="属性值"/>
<input/>标签为单标签
type属性设置不同的属性值来控制不同的类型
<input>标签中type常用的属性值
text:单行文本输入框,可以通过正整数的size控制框长度。
password:密码输入框。
radio:单选按钮,同一组的单选按钮必须要有相同的name。
checkbox:复选框,同一组的单选按钮必须要有相同的name。
button:普通按钮,点击触发事件。
submit:提交按钮,每出现一次,一个 Submit 对象就会被创建,将表单提交给后台。
reset:重置按钮,会重置当前表单中全部的内容。
image:图像形式的提交按钮,写法是“”。
hidden:隐藏域,隐藏字段对于用户是不可见的。
file:文件域,用于文件上传。
案例1:文本框和密码框
<form action="" method="" name=""> 用户名: <input type="text"><br> 密码: <input type="password"> </form>
案例2:单选按钮和复选框
<form action="" method="" name=""> 用户名: <input type="text"><br> 密码: <input type="password"><br> 性别: 男<input type="radio"> 女<input type="radio"><br> 爱好: 吃饭<input type="checkbox"> 睡觉 <input type="checkbox"> 打豆豆 <input type="checkbox"> </form>
3.<input>中的属性
<form action="" method="" name=""> 用户名: <input type="text" name="username"><br> 密码: <input type="password" name="username"><br> 性别: 男<input type="radio" name="sex"> 女<input type="radio" name="sex"><br> 爱好: 吃饭<input type="checkbox" name="like"> 睡觉 <input type="checkbox" name="like"> 打豆豆 <input type="checkbox" name="like"> </form>
name:定义input元素的名称
value:定义input元素的默认值
checked:主要针对与单选按钮和复选框,主要作用一打开页面就可以默认选中某个元素
maxlength:规定输入框的最大长度。
用户名: <input type="text" name="username" value="请输入用户名"><br>
4.<label>标签
<label>标签为input元素定义标注
<label> 用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点选择到对应的表单元素上,提高用户体验。
语法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
注意:<label>标签中的for属性和相关元素的id属性相同。
5.<select>表单元素
(1)使用场景:在页面中如果有多个选项让用户选择,并且想要节约页面空间时,使用<select>标签定义下拉列表。
(2)语法:
<form>
籍贯:<select>
<option>甘肃</option>
<option>陕西</option>
<option>湖南</option>
</select>
</form>
注意:在<option>中定义selected="selected",设置当前项为默认选项
6.<textarea>文本域标签
(1)使用场景:
当用户输入内容较多的情况下,使用<textarea>标签,用于定义多行文本输入的控件。
(2)语法:
<textarea cols="5" rows="10">
文本内容
</textarea>
cols:每行中的字符数,rows行数
<form>
总结:
<textarea cols="5" rows="10">
</textarea>
</form>
综合案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案列-注册页面</title>
</head>
<body>
<h4>青春不常在,抓紧找对象</h4>
<table width="500px" >
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan"><img src="css\js\img\se02.jpeg" title="图片加载失败"> 男</label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="css\js\img\se02.jpeg" title="图片加载失败">女 </label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年份--</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select>
<option>请选择日期</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" value="上海">
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text" value="北京大同">
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="like">妖娆
<input type="checkbox" name="like">可爱
<input type="checkbox" name="like">清纯
<input type="checkbox" name="like">温柔
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" id="nan" checked="checked"> <label for="nan"><img src="css\js\img\se02.jpeg" title="图片加载失败"> 未婚</label>
<input type="radio" name="marry" id="nv"> <label for="nv"><img src="css\js\img\se02.jpeg" title="图片加载失败">已婚</label>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea>
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked"> 我同意注册条款
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我保证</h5>
<ul>
<li>曾经沧海难为水</li>
<li>除却巫山不是云</li>
</ul>
</td>
</tr>
</table>
</body>
</html>