基础语法-文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--网页标题-->
<title>Title</title>
</head>
<body>
<!--
文本标签1：
内容标题标签 h1~h6 ， 英文单词：headline
特点：加粗，独占一行
属性：align="center" 居中对齐
left, 左对齐
right,右对齐
-->
<h1>标题1</h1>
<h2 align="center">标题2</h2>
<!--
文本标签1：水平线
标签：<hr/>, horizontal
标签类型： 成对标签，含有标签体文本或子标签
单标签，不含有标题体文本或子标签， <hr/>
属性：
width, 设置水平线宽度
值的类型1： width="500px" ，长度单位是像素
值的类型1： width="50%" ，长度单位是百分比，占父标签宽度的百分比
size, 设置线的粗细
color, 设置线的颜色
值的类型1： color="red",值为单词字符串形式
值的类型2： color="rgb(数字1，数字2，数字3)"，数字的范围0~255，由reg,green,blue共3钟颜色组成
值的类型3： color="#AABBCC"，十六进制格式形式， 如果十六机制中字符是重复的可以简写为 #ABC
-->
<hr width="500px" size="10px" color="red"/>
<hr width="500px" size="10px" color="#AABBCC"/>
<!--
文本标签3：字体标签，被html5淘汰，以后使用span标签代替
标签：<font>
属性：
size:字体大小, 值得有效范围1~7，数字越大字体越大
face:字体的类型，微软雅黑，楷体。。。
文本标签4：换行标签
标签：<br/>
-->
<font size="7" face="楷体">今天学习HTML网页</font><br/><font size="1">今天学习HTML网页</font><br/>
<!--
文本标签5：<b> bold,字体加粗
文本标签6：<i> italic,字体为斜体
-->
今天<b><i>学习</i></b>HTML网页
<!--
文本标签7：段落标签 <p>,paragraph
特点：前后隔一行
段落缩进暂时使用空格特殊字符： 一个空格占一个字节，当前页面utf-8码表一个汉字占3个字节，这里需要空格6个
属性：title 用于设置鼠标移动到段落上显示的提示文字
-->
<p title="段落"> 今天天气不错，微风凉凉，会学习很多Html标签.</p>
今天<b><i>学习</i></b>HTML网页
</body>
</html>
基础语法-列表标签
<!--
有序列表：ol-li ol的单词 orderlist
-->
<ol>
<li>红烧肉</li>
<li>番茄炒牛肉</li>
<li>地沟油薯条</li>
<li>口水鸡</li>
</ol>
<!--
无序列表：ul-li ol的单词 unorderlist
-->
<ul>
<li>红烧肉</li>
<li>番茄炒牛肉</li>
<li>地沟油薯条</li>
<li>口水鸡</li>
</ul>
基础语法-实体字符
常用的实体字符：
基础语法-图片标签
<!--
图标标签语法：
<img src="设置图片的地址"
alt="当前图片地址丢失的时候替换显示的文字"
height="图片的高度"
width="图片的宽度"
title="鼠标移动到上方提示的文字"
>
注意： height 或 width 一般只设置一个，另一个会等比例放大或缩小
快捷生成标签方式：1.写标签名，2.使用Tab键快速生成
-->
<img src="img/girl.jpg" width="472" title="美女"/></body>
案例-表格
<!--
表格布局标签
<table> 表格的容器标签
<tr> 行标签
<td> 普通单元格标签
<th> 列标题单元格标签，默认里面的数据是加粗并且居中
标签布局标签属性：
border="1px"，设置边框线粗细为1px
表格的边框线
单元格的边框线
style="border-collapse: collapse",设置表格的样式
border-collapse: collapse，设置表格的边框线与单元格的边框线合并成1条线显示
align="center",设置居中的
如果是table标签的属性，是设置table在父标签中居中展现
如果是tr或td标签的属性，是设置标签里面的数据居中
colspan,设置跨列合并显示
rowspan,设置跨行合并显示
需要了解的属性与标签：
cellpadding="8px",用来设置单元格的边框线到单元格里面内容的距离
<caption>学生成绩表</caption>，设置表格的标题，在表格的上方居中显示
表格的逻辑结构划分：一个表格本质是划分为3个部分组成
<table>
<thead>表格的头部(省略tr等标签)...</thead> ,这个可有可无
<tbody>表格的主体(省略tr等标签)...</tbody>， 这个必须有，如果开发人员没有编写，浏览器会自动加上
<tfoot>表格的主体(省略tr等标签)...</tfoot>，这个可有可无
</table>
表格的真实层级结构：table -> tbody -> tr -> td/th
-->
<table border="1px" style="border-collapse: collapse;width: 50%" align="center" cellpadding="8px">
<caption>学生成绩表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>100</td>
<td>潘金莲</td>
<td>女</td>
<td>80</td>
</tr>
<tr align="center">
<td>200</td>
<td>武大郎</td>
<td>男</td>
<!--设置跨2行合并显示-->
<td rowspan="2">90</td>
</tr>
<tr align="center">
<td>300</td>
<td>红太狼</td>
<td>女</td>
<!-- <td>90</td>-->
</tr>
<tr align="center">
<td>总成绩</td>
<!--设置跨3列合并显示-->
<td colspan="3">900</td>
<!-- <td>900</td>
<td>900</td>-->
</tr>
</table>
案例-表单标签
<!--
表单标签：
作用：接收用户输入的数据，并将其提交给服务器
语法：<form action=“设置服务器的地址” method="提交数据的方法">
表单项元素（让用户输入数据）
提交按钮（目的：让表单进行提交）
</form>
属性method：常用的值如下
method="get", 设置get方法提交数据【默认方式】
通过地址栏提交数据(明文提交)，格式：url?name1=value1&name2=value2...
这种方式提交：不安全，不适合敏感数据提交
get提交数据大小有限制，一般是18KB以下
method="post"，设置post方法提交数据【推荐使用】
非明文提交数据，因为用户看不到，底层是通过http协议格式的请求体提交
这种方式提交数据安全
get提交数据大小没有限制
表单提交数据必须的条件：
1.必须有form标签
2.form标签必须设置action服务器地址
3.必须有表单项标签输入的数据，表单项标签必须含有name属性
4.必须有提交按钮，才可以提交表单
表单项元素：
1.使用 <input type="password" > 密码框标签显示密码。
2.使用 <input type="submit"> 提交按钮显示注册。
3.使用 <input type="email"> 邮箱框标签显示邮箱。
4.使用 <input type="radio">单选框标签显示性别。
5.使用 <input type="checkebox"> 复选框标签显示爱好。
6.使用 <select> 下拉框标签显示学历和分组显示所在城市信息。
7.使用 <input type="date"> 日期框显示出生信息。
8.使用 <input type="file"> 文件域框显示上传照片信息。
9.使用 <textarea> 文本域多行文本框标签显示个人简介。
10.使用 <input type="hidden"> 隐藏域框存储数据。
11.使用 <input type="reset"> 重置按钮显示重置。
-->
<h1>用户注册</h1>
<hr>
<form action="https://www.baidu.com" method="get">
<table>
<tr>
<td>用户名：</td>
<td>
<!--文本框（表单项元素）,用户名文本框
扩展属性：设置表单项不可用属性disabled="disabled",并且数据不会提交给服务器
只读属性readonly="readonly", 属性只读不可编辑，但是会提交给服务器
-->
<input type="text" name="username" value="张三" readonly="readonly" placeholder="请输入用户名">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<!-- 1.使用 <input type="password" > 密码框标签显示密码。-->
<input type="password" name="pwd" placeholder="请输入密码">
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<!-- 3.使用 <input type="email"> 邮箱框标签显示邮箱，当表单提交的时候会验证邮箱的格式是否正确-->
<input type="email" name="email" placeholder="请输入邮箱">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<!-- 4.使用 <input type="radio">单选框标签显示性别。
注意：
1.单选按钮必须设置value="值"，这样才会提交有效数据
2.一组单选框只能有一个被选中，需要设置name一样才可以
常用选中属性，一般用于默认选中一个
checked="checked"
-->
<input type="radio" name="gender" value="男"> 男
<input type="radio" name="gender" value="女" checked="checked"> 女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<!-- 5.使用 <input type="checkebox"> 复选框标签显示爱好。
注意：
1.复按钮必须设置value="值"，这样才会提交有效数据
2.一组复选框需要设置name一样，才可以提交多个同一name的数据
常用选中属性，checked="checked",设置默认选中
-->
<input type="checkbox" name="hobby" value="游泳"> 游泳
<input type="checkbox" name="hobby" value="上网"> 上网
<input type="checkbox" name="hobby" value="电影"> 电影
<input type="checkbox" name="hobby" value="看书"> 看书
</td>
</tr>
<tr>
<td>学历</td>
<td>
<!--6.使用 <select> 下拉框标签显示学历信息。
设置默认选中某一项的属性：selected="selected"
-->
<select name="edu">
<option value="1">本科</option>
<option value="2">大专</option>
<option value="3" selected="selected">高中</option>
</select>
<!--扩展：下拉还可以分组
<select name="edu">
<optgroup label="广东省">
<option value="1">广州市</option>
<option value="2">佛山市</option>
</optgroup>
<optgroup label="广西省">
<option value="3" selected="selected">桂林</option>
</optgroup>
</select>
-->
</td>
</tr>
<tr>
<td>出生：</td>
<td>
<!--7.使用 <input type="date"> 日期框显示出生信息。-->
<input type="date" name="birthday">
</td>
</tr>
<tr>
<td>照片：</td>
<td>
<!--8.使用 <input type="file"> 文件域框显示上传照片信息。-->
<input type="file" name="pic">
</td>
</tr>
<tr>
<td>个人简介</td>
<td>
<!--9.使用 <textarea> 文本域多行文本框标签显示个人简介。
cols="30" 初始化显示文本域一行宽度有30个字符的长度
rows="5" 初始化显示文本域的行数有5行
-->
<textarea name="description" cols="30" rows="5"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<!--提交按钮：注册按钮-->
<input type="submit" value="注册">
<!--重置按钮，用于将页面已输入的数据恢复到页面初始化的状态-->
<input type="reset">
</td>
</tr>
</table>
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
