HTML标签:
1、概念:是最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言
超文本:
使用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
标记语言:
由标签构成的语言, <标签名称>如 html,htm
标记语言不是编程语言
2、快速入门
语法:
1.html文档后缀名 .html 或 .htm
2.标签分为
1.围堵标签:<html></html>
2.自闭合标签:<br/>
3.标签可以嵌套
4.在开始标签中可以定义属性,属性是由键值对构成的,值需要使用引号引起来(单双都可以)
5.html不区分大小写,但是建议小写
代码:
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<font color="red">hello world</font><br/>
<font color="green">hello world</font>
</body>
</html>
3、标签学习:
1.文件标签:构成html最基本的标签
* html: html文档的根标签
* head: 头标签,指定html文档的一些属性,引入外部资源
* title: 标题标签
* body: 体标签
* <!DOCTYPE html> html5中定义文件类型
2.文本标签:和文本有关的标签
* <h1> to <h6>:标题标签,字体大小逐渐变小
* <br>:换行标签
* <hr>: 一条横线
* <p> :段落标签
* <b> :字体加粗
* <I> :斜体
* <center>:居中
*<font>:字体标签
*属性
*color:颜色
*size:大小
*face:字体
*属性定义:
*color:
1.英文单词:red, green,blue
2.rbg(值1,值2,值3):值的范围:0~255 如 rbg(0,0,255)
3.#值1值2值3:值的范围:00~FF 如 #FF00FF
*width:
1.数值:300px(像素)
2.百分比:相对于父容器
3.图片标签
<img src = “./image/1.jpg”>
*相对路径:./:代表当前路径
../:代表上一级路径
4.列表标签
*有序列表
* ol
* li
*无序列表
* ul
* li
5.链接标签
<a href=“"target="_blank"></a>
6.<span>和<div>
7.语义化标签
<header></header>
<footer></footer>
8.表格标签
*<table>: 定义表格
*width:宽度
*border:边框
*cellpadding: 定义边框与内容距离
*cellspacing:定义单元格之间距离
*bicolor:背景色
*align:对齐方式
*<tr>: 定义行
*<thead>
*<tbody>
*<tfoot>
*<td>: 定义列
*<colspan>:合并列
*<rowspan>:合并行
9.表单标签
*<form>:用于定义表单的,可以定义一个范围,范围代表采集用户数据的范围(表单属性要想被提交,得指定 name 属性)
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<form action="###" method="get">
姓名:<input name="username" /><br/>
密码:<input name="password" /><br/>
<input type="submit" value="提交" />
</form>
</body>
</html>
效果:
属性:
*action :指定提交URL
*method:指定提交方式
get:
1.请求参数会在地址栏中显示
2.请求参数大小有限制
3.不太安全
post:
1. 请求参数不会在地址栏中显示
2. 请求参数大小没有限制
3. 较为安全
10.表单项标签:
*input:可以通过 type 的属性值改变元素的展示样式
* text:文本输入框,默认值 (placeholder:可以提示信息)
* label:label 的 for 属性一般会和 input 的 id 属性对应,对应之后点击 label 区域,会让 input 输入框获取焦点
* password:密码输入框
* radio:单选框
*注意:
1.要想让单选框实现单选效果,则多个单选框的name属性值必须一样
2.一般会给每一个单选框提供value属性,指定其被选后提交的值
3.checked属性可以指定默认值
*checkbox:复选框
*file:文件选择框
*color:取色器
*button:一个按钮
*submit:提交
*select:下拉列表
11.下拉列表:
省份:<select name="province">
<option>请选择</option>
<option>北京</option>
<option>上海</option>
<option>陕西</option>
</select>
12.textarea:文本域
自我描述: <textarea rows="5" cols="10" name="desc"></textarea>
4、实战:注册页面
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
</head>
<body>
<form action="#" method=post">
<table border="1" align="center" width="500" cellspacing="2" cellpadding="2">
<tr>
<td><label for="username">用户名:</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">email:</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名:</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel">手机号码:</label></td>
<td><input type="text" name="tel" id="tel"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="felmale”>女 </td>
</tr>
<tr>
<td><label for="birth">出生日期:</label></td>
<td><input type="date" name="birth" id="birth"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="登录"/></td>
</tr>
</table>
</form>
</body>
</html>
效果: