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

一时失言乱红尘 2022-12-16 11:59 143阅读 0赞

## 什么是HTML ##

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

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

## 如何使用HTML ##

### HTML语法 ###

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

### 标签分类 ###

#### 文件标签 ####

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：

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

#### 图片标签 ####

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

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

#### 列表标签 ####

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

早上起床干的事情
        <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：在空白页面打开  
    点击图片跳转

#### 分块标签 ####

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：

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

checkbox：复选框  
notes：

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

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

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

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

select:下拉列表

*  子元素：option，指定列表项

textarea：文本域

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

#### 案例一 ####

练习表单提交代码

#### 案例二 ####

实现注册页面。

<!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>