web前端——HTML（一看就会写自己的小网页）

最新推荐文章于 2024-07-12 21:49:18 发布

刘思睿(昵称已存在)

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量1k

点赞数 25

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_78341216/article/details/139998464

版权

什么是前端？通俗的来讲，我们每天通过电脑浏览器浏览的任何一个网页都是经过前端编码设计出来的。例如大家平时经常光顾的淘宝、京东等网页，如下图：

他的背后实际上隐藏着大量的前端代码：

那么我们作为一个合格的码农，该如何实现这样的一个网页的编写呢？接下来，我将对web前端的编码知识进行详细介绍！

一、HTML概述

1.HTML：超文本标记语言（HyperText Markup Language）

超文本：是指页面内可以包含图片、链接、视频、声音等内容。

标记：标签（通过标记符号来告诉浏览器网页内容该如何显示）

2.浏览器根据不同的HTML标签，解析成我们现在所看到的网页。

二、HTML基本语法

1.声明

html4的文档声明：

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

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

html5的文档声明：

<!DOCTYPE html>

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

2.HTML文件的基本样式

一个空的html文档格式如下：

3.标签

HTML中的标记就是指标签。

HTML使用标记标签来描述网页。

（1）结构

① 闭合标签：<标签名>标签内容</标签名> （有标签内容）

② 自闭合标签：<标签名/> （无标签内容）

（2）标签属性

标签可以拥有属性。属性进一步说明了该标签的显示或使用特性

① 属性的格式：属性名 = “属性值”

//例如：
<body text="red">

② 属性的位置：<标签名属性名 = “属性值“ >xxx</标签名>

//例如：
    <body text="red">
		我是一个HTML文档
	</body>

③ 添加多个属性：<标签名属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

//例如：
    <body text="red" id="box1">
		我是一个HTML文档
	</body>

三、基本常用标签

标签我们一般放在<body>中使用

1.标题标签

从<h1>内容</h1>......<h6>内容</h6>，控制内容作为标题的字体大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>你好</h1>
		<h2>你好</h2>
		<h3>你好</h3>
		<h4>你好</h4>
		<h5>你好</h5>
		<h6>你好</h6>
	</body>
</html>

效果如下：

2.段落标签

<p>内容</p>，他体现在无论内容里有多少信息都独占一行，后面的输入只能新起一行在网页中存放。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>你好</p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
	</body>
</html>

效果如下：（我们可以看到<p>标签中的 “你好” 独占一行）

3.换行标签

<br/> 顾名思义，就是对内容进行换行操作。例如这里我们写两句古诗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		山重水复疑无路<br />柳暗花明又一村
	</body>
</html>

效果如下：

4.列表

（1）有序列表

格式：<ol><li></li></ol>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ol>
			<li>你</li>
			<li>好</li>
			<li>呀</li>
		</ol>
	</body>
</html>

效果如下：

（2）无序列表

格式：<ul><li></li></ul>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>你</li>
			<li>好</li>
			<li>呀</li>
		</ul>
	</body>
</html>

效果如下：

5.超链接

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

href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址)
URL(Uniform Resource Locator)统一资源定位符

效果如下：（点击 " 百度 "，跳转到百度网页）

6.图像标签

格式：<img src=" " />

效果如下：

7.特殊转义符

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

比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。
例如：<b> 会被解析为b标签，空格,再多的空格都会当一个空格处理。
为了可以使用这些预留字符，我们必须在html中使用字符转义。

以下是一些常见转义符：

四、表格

1.表格的基本构成标签

table标签：表格标签

tr标签：表格中的行

th标签:表格的表头

td标签：表格单元格

2.表格的基本结结构

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

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1"><!-- 定义表格 -->
			<tr><!-- 定义表行 第一行-->
				<th>表头内容（内容字体加粗）</th>
				<th>表头内容（内容字体加粗）</th>
			</tr>
			<tr><!-- 定义表行 第二行 -->
				<td>表单元格内容</td>
				<td>表单元格内容</td>
			</tr>
		</table>
	</body>
</html>

效果如下：

3.表格常见属性

width —— 表格内容宽度

height —— 表格内容高度

cellspacing —— 两个单元格之间的距离

cellpadding ——

align —— （center，left，right）分别控制单元格内容在单元格的中间、左对齐、右对齐位置

valign —— （top，middle，bottom）分别控制单元格内容在单元格的顶部、中间、底部位置

rowspan —— 跨多行合并，位置随相应的td位置，合并几行就删除相应tr里的td

colspan —— 跨多列合并，合并位置随td位置，要合并几列就删除后面几个td

这里对rowspan 和 colspan 进行演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<table border="1" width="400" height="300">
				<tr>
					<td colspan="3"></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td rowspan="2"></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</body>
</html>

效果如下：（得到一个可自定义样式的表格）

五、表单

网页表单中有许多可以输入或选择的组件，用户可以在表单中填写信息，最终提交表单，把客户端数据提交至服务器。

1.表单基本格式

<form action=“http://www.sohu.com”method=“post”>

……
</form>

2.表单——文本

密码框基本语法

<input type=“password ” value=“ 123456 ” />

单选按钮基本语法

<input type="radio" value="男" checked="checked“/>

复选框基本语法

<input type=“checkbox” name="cb2“ value="talk“/>

注意：单选框通过name属性来分组，name相同是一组才可实现单选。

单选和复选不能输入内容，所以必须指定value的值。

文件选择框语法

<input type=“file” name=“img”/>

accept=“. 文件后缀名 ,. 文件后缀名 … “ 限制文件类型

以下是完整代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form action="" method="">
			账号：<input type="" name="account" value="" placeholder="请输入账号"/><br />
			密码：<input type="" name="password" value="" placeholder="请输入密码"/><br />
			性别：<input type="radio" name="gender" value="男"/>男
			      <input type="radio" name="gender" value="女" />女<br />
			语言：<input type="checkbox" name="language" value="java"/>java
			      <input type="checkbox" name="language" value="html" />html
				  <input type="checkbox" name="language" value="mysql" />mysql
				  <input type="checkbox" name="language" value="c" />c <br />
		</form>
	</body>
</html>

效果如下：

3.下拉框、多行文本域、按钮

（1）语法格式

① 下拉框基本语法

<select name="province">（下拉框）
               <option value="100">陕西</option>（选项）
               <option value="101">天津</option>
               <option value="102">北京</option>
</select>

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

② 多行文本域基本语法
<textarea name="textarea" cols="40" rows="6">（分别表示文本域行数、列数）
        文本域中的内容

</ textarea >

③ 按钮基本语法

<input type="reset" name="Reset" value=" 重填 ">（分别表示按钮类型、按钮名称、按钮上显示的名称）

实例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form action="" method="">
			籍贯：<select name="province">
				<option value="100">陕西</option>
				<option value="101">天津</option>
				<option value="102">北京</option>
			</select> <br />
			地址：<textarea name="address" cols="30" rows="5"></textarea> <br />
			附件：<input type="file" name="file"/> <br />
			<input type="submit" value="保存"/>
			<input type="button" value="登录"/ onclick="alert('刘思睿')">
			<input type="reset" />
		</form>
	</body>
</html>

效果如下：