前端学习笔记(一)前端三剑客之HTML

什么是HTML

Hyper Text Markup Language 叫做超文本标记语言。

超文本
指的是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
标记语言
由各类标签所组成的语言，如.html，.td ，.xml等。
标记语言不是编程语言。

如何使用HTML

HTML语法

html 文档后缀名 .html 或者采用.htm
标签分类
围堵标签: 有开始标签和结束标签。如<html> </html>
自闭和标签:开始标签和结束标签是同一个，标签体没有内容如
。
notes：html语言是不区分大小写，但官方推荐使用小写。
嵌套标签
需要正确嵌套，不能出现混乱现象。
错误嵌套:
正确嵌套:

标签分类

文件标签

html:html文档的根标签

head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签。
body：体标签
<!DOCTYPE html>：html5中定义该文档是html文档

文本标签

注释：

<h1> to <h6>：标题标签
h1~h6:字体大小逐渐递减
<p>：段落标签
<br>：换行标签
<hr>：展示一条水平线
hr标签属性：

color：颜色
width：宽度
size：高度
align：对其方式
center：居中
    left：左对齐
     right：右对齐

<b>：字体加粗
<i>：字体斜体
<font>:字体标签
font属性：

color：颜色
size：大小
face：字体

<center>:相对于父元素文本居中
属性定义：
color：

英文单词：red,green,blue
rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
#值1值2值3：值的范围：00~FF之间。如： #FF00FF
width：
数值：width=‘20’ ,数值的单位，默认是 px(像素)
数值%：占比相对于父元素的比例

图片标签

img:展示图片
属性:
src：指定图片的位置
alt: 如果图片不显示的话就显示alt属性里的内容。

<img src="image/天坛.jpg" align="right" alt="天坛" width="500" height="500"/>

上述实例中如果图片无法显示，那么就会显示alt属性里面的内容
notes：在写src目录需要注意的是路径写法，src 属性中都遵循相对路径的基本规则。
以.开头的路径
./：代表当前目录 ./image/1.jpg
…/:代表上一级目录

列表标签

有序列表：
ol:（orderlist）
li:
有序列表可以实现有序编号

<!--有序列表 ol-->
    早上起床干的事情
    <ol type="A" start="5">
        <li>睁眼</li>
        <li> 看手机</li>
        <li> 穿衣服</li>
        <li> 洗漱</li>
    </ol>

无序列表：
ul:
li:
无序列编号。

早上起床干的事情
    <ul type="disc">
        <li>睁眼</li>
        <li> 看手机</li>
        <li> 穿衣服</li>
        <li> 洗漱</li>
    </ul>


    早上起床干的事情
    <ul type="square">
        <li>睁眼</li>
        <li> 看手机</li>
        <li> 穿衣服</li>
        <li> 洗漱</li>
    </ul>

链接属性

a:定义一个超链接
href：指定访问资源的URL(统一资源定位符)
target：指定打开资源的方式

_self:默认值，在当前页面打开
_blank：在空白页面打开
点击图片跳转

<a href="http://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>

分块标签

div: 每一个div占满一整行，块级标签
span:文本信息在一行展示，行内标签内联标签

语义化标签:

html5中为了提高程序的可读性
footer：页脚
header: 页眉

表格标签

	table：定义表格
		width：宽度
		border：边框
		cellpadding：定义内容和单元格的距离
		cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
		bgcolor：背景色
		align：对齐方式
	 tr：定义行
		bgcolor：背景色
		align：对齐方式
	 td：定义单元格
		colspan：合并列
		 rowspan：合并行
	 th：定义表头单元格
	 <caption>：表格标题
	<thead>：表示表格的头部分
	 <tbody>：表示表格的体部分
	<tfoot>：表示表格的脚部分

表单标签

form:用于定义表单，可以定义一个范围，范围代表采集用户数据的范围
属性

action: 指定提交数据的URL
methond: 指定提交方式
分类共有7种，2种比较常用

get和post的区别:

get：
请求参数在地址栏中显示
请求参数的大小是有限制的
安全权性欠佳
post：
请求参数不会在地址栏中显示
请求参数大小没有限制
安全性较好
notes：表单要想被提交，必须指定其name属性。

表单项标签

input:可以通过type属性值，改变元素元素展示的样式

type属性：

text：文本输入框，默认值
placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password：密码输入框
radio:单选框

notes：

要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
一般会给每一个单选框提供value属性，指定其被选中后提交的值
checked属性，可以指定默认值

checkbox：复选框
notes：

一般会给每一个单选框提供value属性，指定其被选中后提交的值
checked属性，可以指定默认值

file：文件选择框
hidden：隐藏域，用于提交一些信息。
按钮：

submit：提交按钮。可以提交表单
button：普通按钮
image：图片提交按钮
src属性指定图片的路径

label：指定输入项的文字描述信息
notes：label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

select:下拉列表

子元素：option，指定列表项

textarea：文本域

rows:指定默认有多少行。
cols:指定默认有多少列。

案例一

练习表单提交代码

<form action="#" method="get">

    <label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别：<input type="radio" name="gender" value="male" >  男
         <input type="radio" name="gender" value="female" checked>  女
            <br>
    爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
        <input type="checkbox" name="hobby" value="java"  checked> Java
        <input type="checkbox" name="hobby" value="game"> 游戏<br>

    图片：<input type="file" name="file"><br>
    隐藏域：<input type="hidden" name="id" value="aaa"> <br>

    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="birthday"> <br>
    生日：<input type="datetime-local" name="birthday"> <br>
    邮箱：<input type="email" name="email"> <br>
    年龄：<input type="number" name="age"> <br>

    省份：<select name="province">
            <option value="">--请选择--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected>陕西</option>
         </select><br>

    自我描述：
        <textarea cols="20" rows="5" name="des"></textarea>

    <br>
    <input type="submit" value="登录" >
    <input type="button" value="一个按钮" ><br>
    <input type="image" src="img/regbtn.jpg">
</form>

案例二

实现注册页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <form action="#" method="post">
        <table>
            <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="text" 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><label>性别</label></td>
                <td>
                    <input type="radio" name="gender" value="male"> 男
                    <input type="radio" name="gender" value="female"> 女
                </td>
            </tr>
            <tr>
                <td><label for="birthday">出生日期</label></td>
                <td><input type="date" name="birthday" id="birthday"></td>
            </tr>
            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td>
                    <input type="text" name="checkcode" id="checkcode">
                    <img src="img/verify_code.jpg" alt="验证码">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
        </table>
    </form>
</body>
</html>