基础语法-文本标签
<!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>