HTML基本语法及常用组件[web前端]

小咪咪 2024-04-07 13:25 67阅读 0赞

#### 在现在网速足够快的情况下，非常适合使用web项目 ####

*  web项目：B/S
    
     *  Broswer(浏览器，如京东、百度...) ---> Server(服务器端)
 *  客户端项目：C/S
    
     *  Client(客户端，安装特定的客户端) ---> Server(服务器端)

**两种程序架构的区别：**

客户端项目需要在电脑上安装特定的客户端，然后和服务器端交互才能使用，比如360、微信...，而web项目只需要安装浏览器，在浏览器中只需要输入不同地址(如京东、淘宝...)，就可以实时与服务器进行交互，使用网页来充当用户交互界面，将开发好的网页部署在服务器中，然后通过浏览器访问即可，像一些小程序、公众号都是用web去写的。

**那么我们如何开发网页呢？**

*  使用html、css、javaScript开发网页(vue.js、elementUI都是在html、css、javaScript基础上封装而来的)

### 1 HTML概述 ###

HTML：超文本标记语言 (HyperText Markup Language)。

*  超文本：指的是网页中可以显示的内容，例如图片、链接、音频、视频......

*  标记：指的是标签，通过标记符号来告诉浏览器网页内容该如何显示(如：商品的标签、衣服上的标签，介绍衣服信息) ，html语言中提供了许多的标签，我们可以使用标签来编写网页，最终通过浏览器进行翻译，呈现最终的效果，也就是通过标签来编写网页内容。
    
     *  用HTML语言把我们需要显示的内容显示在浏览器上，但是HTML语言本身并不显示，Web浏览器根据不同的HTML标签，解析成我们看到的网页。

![a0bd244718e0486fb2e276820e5d0911.jpeg][]

**HTML可以做什么？**

*  开发基本的网页

### 2 HTML基本语法 ###

**2.1 声明**

*  如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现。

① html4的文档声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

② html5的文档声明：

<!DOCTYPE html>

**2.2 html基本结构**

![53c9aa5a47e6440dad7bf59e10898561.png][]

<!DOCTYPE html> 
    
    <html> 
        
        <head> 
            
            <meta charset="utf-8" /> 
            
            <title>百度一下，你就知道</title> 
            <link rel="icon" href="img/baidu.ico"/> 
        </head>
        <body>
            网页的内容都写在body里
        </body>
    </html>

呈现出的效果：

![d7d2712880054febbb6002bc228f2602.png][]

**HTML注释： 注释后的内容不会显示在网页上**

#### 2.3 常用标签 ####

**1. 标签概述**

*  网页是由标签构成的

*  结构：

闭合标签/双标签：<开始标签> 标签体 </结束标签>
    eg：<title>百度一下，你就知道</title>
    自闭和标签：<标签名  /> 
    eg：<link rel="icon" href="img/baidu.ico"/>

**2. 标签属性**

*  标签中可以拥有属性,通过属性进一步修饰标签特性

①属性的格式：属性名="属性值"

②属性的位置：属性必须写在开始标签中

③一个标签可以有多个属性

**3. 常用标签**

①标题标签：<h1> </h1>…..<h6> </h6>

*  可以占一行空间
 *  align属性可以设置文本内容在标签行内的对齐方式

②段落标签：<p> </p>

*  占一行，段落与段落之间有间隔

③换行标签：

④列表

a.无序列表：前面有一个图标，没有序号

b.有序列表：前面有一个序号，通过type属性改变序号规则 1 A a I i

<ul>
        <li>列表项内容</li> 
        <li>列表项内容</li> 
        <li>列表项内容</li> 
    </ul>
    
    <ol type="I">
        <li>列表项内容</li> 
        <li>列表项内容</li> 
        <li>列表项内容</li> 
    </ol>

效果：

![47a426aa0f8b464ba5b8726031ac447f.png][]

⑤超链接：

*  HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接来访问其他网页资源。

1.  target：打开链接文档的位置，默认值为*self (target="*self在当前窗口打开 ,\_blank在新窗口打开")
2.  href (Hypertext Reference超文本引用)：规定链接指向的页面的URL(页面地址)
3.  URL(Uniform Resource Locator)：统一资源定位符

⑥图像标签：<img/>

*  基本语法：
    
        <img src=“img/demo.jpg”width=“300”height=“150“border=“1”/>
                     图像路径    图像宽度   图像高度    图像边框
    
     *  图像的宽高不建议使用，现实中一般要网页中要多大图片，就制作多大的图片，设置宽高可能会使图片变形。

⑦标尺线：<hr/>

**4. 特殊符号转义**

在HTML中预留了一些字符，这些预留字符是不能在网页中直接使用的。

*  比如< 和 >，我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html标签。
    
     *  例如：<b> 会被解析为b标签
     *  例如：再多的空格都会当一个空格处理

为了可以使用这些预留字符，我们必须在html中使用字符转义。

小于号<: <
    大于号>: >
    版权(C): ©
    商标(TM): ™
    空格:  
    注册商标(R): ®

### 3 表格 ###

#### **3.1 基本构成标签** ####

*  table标签：表格标签
 *  tr标签：表格中的行
 *  th标签:表格的表头
 *  td标签：表格单元格

#### **3.2 表格的基本结构** ####

<table>定义表格 
        <tr>定义表行
            <th>定义表头</th> 
        </tr>
        <tr>
            <td>定义单元格</td> 
        </tr> 
    </table>

#### **3.3 表格属性和表格合并** ####

**表格属性：**

1.  border (边框)：border="number"；
2.  background(背景图像)：background="图片地址"；
3.  bgcolor(背景颜色)；
4.  width 宽度、height 高度；
5.  cellpadding="0" 设置内容到边框的距离；
6.  cellspacing="0" 设置单元格边框与边框之间的距离；
7.  align="left center right" 设置水平位置；
8.  valign="top middle bottom"垂直对齐，控制单元格内容的对齐方式。

**快捷键**：table>tr\*4>td\*4 然后按table键，就可以自动生成一个四行四列的表格。

**单元格合并：**

*  colspan="合并的数量" ：跨列合并单元格
 *  rowspan="合并的数量" ：跨行合并单元格

案例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>课程表</title>
        </head>
        <body>
            <table border="1" align="center" bordercolor="#608DFA">
                <h4 align="center">课程表</h4>
                <tr height="20">
                    <td width="40" align="center">项目</td>
                    <td width="200" colspan="5" align="center">上课</td>
                    <td width="80" colspan="2" align="center">休息</td>
                </tr>
                <tr height="20" bgcolor="pink">
                    <td align="center">星期</td>
                    <td align="center">星期一</td>
                    <td align="center">星期二</td>
                    <td align="center">星期三</td>
                    <td align="center">星期四</td>
                    <td align="center">星期五</td>
                    <td align="center">星期六</td>
                    <td align="center">星期日</td>
                </tr>
                <tr height="20">
                    <td rowspan="4" align="center">上午</td>
                    <td align="center">语文</td>
                    <td align="center">数学</td>
                    <td align="center">英语</td>
                    <td align="center">计算机</td>
                    <td align="center">化学</td>
                    <td align="center">地理</td>
                    <td rowspan="4" align="center">休息</td>
                </tr>
                <tr height="20">                
                    <td align="center">数学</td>
                    <td align="center">语文</td>
                    <td align="center">数学</td>
                    <td align="center">历史</td>
                    <td align="center">化学</td>
                    <td align="center">计算机</td>             
                </tr>
                <tr height="20">                
                    <td align="center">化学</td>
                    <td align="center">数学</td>
                    <td align="center">历史</td>
                    <td align="center">地理</td>
                    <td align="center">计算机</td>
                    <td align="center">物理</td>              
                </tr>
                <tr height="20">        
                    <td align="center">数学</td>
                    <td align="center">数学</td>
                    <td align="center">地理</td>
                    <td align="center">化学</td>
                    <td align="center">历史</td>
                    <td align="center">计算机</td>
                </tr>
                <tr height="20">
                    <td rowspan="2" align="center">下午</td>
                    <td align="center">数学</td>
                    <td align="center">数学</td>
                    <td align="center">地理</td>
                    <td align="center">化学</td>
                    <td align="center">历史</td>
                    <td align="center">计算机</td>
                    <td rowspan="2" align="center">休息</td>
                </tr>
                <tr height="20">
                    <td align="center">数学</td>
                    <td align="center">数学</td>
                    <td align="center">地理</td>
                    <td align="center">化学</td>
                    <td align="center">历史</td>
                    <td align="center">计算机</td>
                </tr>
            </table>
        </body>
    </html>

效果图：

![e0c171072a7146de91d654aece9baa20.png][]

### 4 表单 ###

#### **4.1 概述** ####

form标签：表单

*  网页表单中有许多可以输入或选择的组件，用户可以在表单中填写信息，最终提交表单，把客户端数据提交至服务器。
    
     *  也就是用于从前端网页向后端发送数据的组件
     *  有许多输入型、选择型组件

<form action="后端地址" method="post"> 
        …… 
    </form>

#### 4.2 表单组件 ####

**1.文本**

*  单行文本输入框

<input type="text" name="userName" value="张三" readonly="readonly" placeholder="请输入用户名" disabled="disabled">

**2.密码框**

<input type="password" value="123456"/>

**3.单选按钮**

*  单选框必须通过name来进行分组，name相同为一组，就可以形成互斥关系
 *  选择型组件必须给予默认值(value)，也就是向后端提交的值
 *  还可以使用checked属性默认选中

<input type="radio" name="gender" value="男" checked="checked"/>男
    <input type="radio" name="gender" value="女"/>女

**4.复选框：**

<input type=“checkbox” name="course" value="java"/>java
    <input type=“checkbox” name="course" value="c" checked="checked"/>c
    <input type=“checkbox” name="course" value="html"/>html

注意：单选框通过name属性来分组，name相同是一组才可实现单选。 单选和复选不能输入内容，所以必须指定value的值。

**5.文件选择框**

<input type="file" name="img"/>

**6.下拉框**

<select name="province"> 
        <option value="">选择省份</option > 
        <option value="100" selected="selected">陕西</option > 
        <option value="101">四川</option> 
        <option value="102">广东</option>
        <option value="102">山西</option>
    </select>

*  下拉框的name,id,事件等需要在select中定义，而value需要在option中定义。

**7.多行文本域**

<textarea name="mark cols="40" rows="6"> 文本域中的内容 </textarea >

**8.按钮**

*  type="按钮类型" name="按钮名称" value="按钮上显示的名称"

<input type="reset" value="重置"> 重置表单内容 
    <input type="submit" value="提交"> 提交表单内容到服务器
    <input type="button" value="普通按钮"> 普通按钮没有功能，需要添加事件来完成功能

表单案例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>淘宝注册</title>
    	</head>
    	<body>
    		<form>
    			<img src="img/logo.gif"/><img src="img/reg.gif" /><br />
    			姓名：<input type="text" name="name"/><br /><br />
    			登录名：<input type="text" name="userName" /> (可包含a-z、0-9和下划线)<br /><br />
    			密码：<input type="password" name="password" /> (至少包含6个字符)<br /><br />
    			确认密码：<input type="password" name="confirm password" /><br /><br />
    			性别：<input type="radio" name="gender" value="男" checked="checked"/><img src="img/Male.gif">男
    			       <input type="radio" name="gender" value="女"/><img src="img/Female.gif">女 <br /><br />
    			爱好：<input type="checkbox" name="hobby" value="运动"/>运动
    			     <input type="checkbox" name="hobby" value="聊天"/>聊天
    				 <input type="checkbox" name="hobby" value="玩游戏"/>玩游戏<br /><br />
    			职业：<select name="occupation">
    				      <option value="1">软件工程师</option>
    				      <option value="2">硬件工程师</option>
    				      <option value="3" selected="selected">系统分析师</option>
    			     </select><br /><br />
    			<img src="img/page02-li.gif" /><img src="img/page02-li.gif" /><font size="5" style="font-family: 黑体;">淘宝阅读者协议</font><br /><br />
    			<textarea cols="60" rows="5" name="address">欢迎您与各淘宝平台经营者（详见定义条款）共同签署本《淘宝平台服务协议》（下称“本协议”）并使用淘宝平台服务！本协议为《淘宝服务协议》修订版本，自本协议发布之日起，淘宝平台各处所称“淘宝服务协议”均指本协议。各服务条款前所列索引关键词仅为帮助您理解该条款表达的主旨之用，不影响或限制本协议条款的含义或解释。为维护您自身权益，建议您仔细阅读各条款具体表述。
                </textarea><br />
    			<input type="checkbox" />已阅读条款<br /><br />
    			<input type="submit"/>
    			<input type="reset"/>
    		</form>
    	</body>
    </html>

效果图：

![81388ba028004790aba272fff699b791.png][]

[a0bd244718e0486fb2e276820e5d0911.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/00399fcc08674279b3e39fcf07612a96.jpeg
[53c9aa5a47e6440dad7bf59e10898561.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/00d6537820184344a3304946b137cab5.png
[d7d2712880054febbb6002bc228f2602.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/860306443de1484ca95772369c7fa585.png
[47a426aa0f8b464ba5b8726031ac447f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/865fbe5f55704f2cab58de51949da0ca.png
[e0c171072a7146de91d654aece9baa20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2c99515448434479ac5a9bb4fda79944.png
[81388ba028004790aba272fff699b791.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6e1a5c29d484428fb399b9541af7202d.png