前端 -- HTML基础

最新推荐文章于 2024-03-05 09:15:36 发布

太白的梳妆镜

最新推荐文章于 2024-03-05 09:15:36 发布

阅读量477

点赞数 2

分类专栏：前端文章标签： HTML基础前端

本文链接：https://blog.csdn.net/weixin_41361296/article/details/103387858

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、HTML概念
二、W3C
- 1. 名称由来
- 2. W3C标准
三、HTML元素
四、表单

一、HTML概念

HTML（Hyper Text Markup Language，超文本标记语言）。
超文本包括文字、图片、音频、视频、动画等。

二、W3C

1. 名称由来

World Wide Web Consortium（万维网联盟），是 Web 技术领域最权威和最具影响力的国际中立性技术标准机构。

2. W3C标准

机构化标准语言（XHTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

三、HTML元素

1. 模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>

    </body>
</html>

2. DOCTYPE声明

<!DOCTYPE html>

文档声明，不属于 HTML 标签，告诉浏览器使用什么规范。此处声明为 HTML5 文档。

3. <html>标签

<html>...</html>

网页的开始、结束标签。

4. <head>标签、<body>标签

<head lang="language">...</head>
<body>...</body>

网页头部信息和正文内容。
lang：告知浏览器使用何种语言，常用语言为"en"、“zh-CN”。

5. <meta>标签

<meta charset="UTF-8"/>
<meta name="keywords" content="keywords1"/>
<meta name="description" content="description1"/>

charset：网页字符编码，告知浏览器使用何种编码解析页面，应与页面文件保存时的编码一致。
name=“keywords”：搜索关键字，如content中可填 “java,教程,博客”。
name=“description”：内容描述，如content中可填 “java日常学习笔记”。

6. <title>标签

<title>...</title>

网页标题。

7. 标题标签

<h1>...<h1>    <!-- 一级标题 -->
<h2>...<h2>    <!-- 二级标题 -->
<h3>...<h3>    <!-- 三级标题 -->
<h4>...<h4>    <!-- 四级标题 -->
<h5>...<h5>    <!-- 五级标题 -->
<h6>...<h6>    <!-- 六级标题 -->

附：标题居中：

<h1 align="center">...<h1>

8. 段落标签

<p>...</p>

成对的标签分别叫开放标签和闭合标签。

9. 换行标签

<br/>

单独呈现的标签（空元素），用 / 来关闭空元素。

10. 水平线标签

<hr/>

11. 字体样式标签

<strong>...</strong>    <!-- 加粗 -->
<em>...</em>    <!-- 斜体 -->

12. 注释和特殊符号

在这里插入图片描述

13. 图像标签

<img src="path" alt="text" title="text" width="x" height="y"/>

src：图像地址。
alt：图像未加载完成时的代替文字。
title：鼠标悬停时的提示文字。
width：图像宽度。
height：图像高度。

14. 链接标签（页面间链接）

<a title="text" target="text" href="path">链接文本或图像</a>

title：鼠标悬停时的提示文字。
href：链接路径（绝对路径或间接路径）。
target：目标窗口位置，链接在那个窗口打开，常用值为 _self 和 _blank。

举例：

<!--跳转到绝对路径-->
<a title="百度一下" target="_blank" href="http://www.baidu.com/">百度一下</a><br/>
<!--跳转到相对路径-->
<a href="a.html">a页面</a>

15. 锚链接

可从A页面的甲位置跳转到本页中的乙位置，也可从A页面的甲位置跳转到B页面的乙位置。

创建步骤：

创建跳转标记

<a name="marker">乙位置</a>

创建跳转链接

<a href="#marker">甲位置</a>

举例：

<h3>刀剑神域</h3>
<a href="#first">第一章</a>
<a href="#second">第二章</a>
<a href="#third">第三章</a>
<a name="first"><h1>第一章</h1></a>       <!--标记点-->
<br/>
<a name="second"><h1>第二章</h1></a>      <!--标记点-->
<br/>
<a name="third"><h1>第三章</h1></a>       <!--标记点-->
<br/>

16. 功能性链接

<a href="mailto:123@qq.com">联系我们</a>

用于发送电子邮件、QQ、MSN 等。

17. 行内元素和块元素

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a、strong、em…）。
块元素：无论内容多少，该元素独占一行（p、h1-h6…）。

18. 列表

18.1 无序列表

<ul>
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
</ul>

<ul>：声明无序列表。
<li>：声明列表项。

无序列表的特性：

没有顺序，每个<li>标签占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，每项都是平级的，并且列表的内容一般都是相对简单的标签性质的网页内容，如导航、侧边栏新闻、有规律的图文组合的模块等

18.2 有序列表

<ol>
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
</ol>

<ol>：声明有序列表。
<li>：声明列表项。

有序列表的特性：

有顺序，每个<li>标签占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于有序类型的列表，如试卷、问卷调查等

18.3 定义列表

<h3>超市销售商品类别</h3>
<dl>
	<dt>水果</dt>
		<dd>香蕉</dd>
		<dd>西瓜</dd>
		<dd>橘子</dd>
	<dt>饮料</dt>
        <dd>可乐</dd>
        <dd>红茶</dd>
        <dd>美汁源</dd>
</dl>

<dl>：声明定义列表。
<li>：声明列表项。
<dd>：定义列表项的内容。

示例效果：
在这里插入图片描述
定义列表的特性：

没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况、带标题和标题解释性内容的情况

19. 表格

19.1 基本语法

<table>
	<tr>
		<td>第1个单元格的内容</td>
		<td>第2个单元格的内容</td>
		...
	</tr>
	<tr>
		<td>第1个单元格的内容</td>
		<td>第2个单元格的内容</td>
		...
	</tr>
</table>

<table>：表格标签。
<tr>：行标签。
<td>：单元格标签。

升级版：

<h1 align="center">133班成绩单</h1>
<table border="1px" align="center" width="500" cellpadding="5" cellspacing="0" style="text-align: center">
	<thead>
		<tr>
			<th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>苏清清</td>
			<td>99</td>
			<td>95</td>
			<td>99</td>
		</tr>
		<tr>
			<td>柳圆圆</td>
			<td>95</td>
			<td>87</td>
			<td>93</td>
		</tr>
		<tr>
			<td>韩雨婷</td>
			<td>98</td>
			<td>96</td>
			<td>98</td>
		</tr>
	</tbody>
</table>

border：边框宽度。
align=“center”：表格居中。
width：单元格长度。
cellpadding：单元格边框到内容之间的距离(留白)。
cellspacing：各单元格之间的空隙。
style=“text-align: center”：单元格内容居中。

<thead>：定义表头。
<tbody>：定义表格主体（正文）。
<th>：单元格中文字自动居中并加粗。

示例效果：
在这里插入图片描述

19.2 表格的跨列

<table>
	<tr>
		<td colspan="n">单元格内容</td>
		...
	</tr>
	<tr>
		<td>单元格内容</td>
		...
	</tr>
</table>

colspan=“n”：n指所跨的列数。

19.3 表格的跨行

<table>
	<tr>
		<td rowspan="n">单元格内容</td>
		...
	</tr>
	<tr>
		<td>单元格内容</td>
		...
	</tr>
</table>

rowspan=“n”：n指所跨的行数。

19.4 表格的跨行和跨列

<table border="1px" align="center" width="300" cellspacing="0" style="text-align: center">
	<tr>
		<td rowspan="3">1</td>
		<td colspan="2">2</td>
		<!-- <td>3</td> -->
	</tr>
	<tr>
		<!-- <td>4</td> -->
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<!-- <td>7</td> -->
		<td>8</td>
		<td>9</td>
	</tr>
</table>

rowspan=“m”：m指所跨的行数。
colspan=“n”：n指所跨的列数。

示例效果：
在这里插入图片描述

四、表单

1. 表单标签

<form method="post" action="path">...<form>

method：规定如何发送表单数据，常用值为 get 和 post。
action：表示向何处发送表单数据，填地址。

2. 元素格式

<input type="text" name="name" value="text"/>

type：元素类型。如 text、password、checkbox、radio、submit、reset、file、hidden、image、button，默认为 text。
name：元素名称。
value：元素的初始值。type 为 radio 时必须指定一个值。
size：表单元素的初始宽度。当 type 为 text 或 password 表单元素的大小以字符为单位，对于其它类型，宽度以像素为单位。
maxlength：type 为 text 或 password 时，输入的最多字符数。
checked：type 为 radio 或 checkbox 时，指定按钮是否已被选中。

3. 文本框

<input type="text" name="userName" value="用户名" size="30" maxlength="20"/>

type 为"text"时，该元素类型为文本框。
name：文本框名称。
value：文本框初始值。
size：文本框长度。
maxlength：文本框可输入的最多字符数。

4. 密码框

<input type="password" name="pwName" size="20"/>

type 为"password"时，该元素类型为密码框。
name：密码框的名称。
size：密码框的长度。

5. 单选框

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

type 为"radio"时，该元素类型为单选框。
name：单选框的名称，同一单选题下的不同单选框应保持 name 属性一致。
value：单选框的值。
checked：默认选中项。

6. 复选框

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

type 为"checkbox"时，该元素类型为复选框。
name：复选框的名称，同一复选题下的不同复选框应保持 name 属性一致。
value：复选框的值。
checked：默认选中项。

7. 列表框

<select name="text" size="2">
<option value="text" selected>...</option>
<option value="text">...</option>
</select>

<select>：列表框标志。
name：列表框名称。
size：列表框行数，可省略。

<optioon>：选项标志。
value：选项的值。
selected：默认选中项。

8. 按钮

<input type="submit" value="text"/>
<input type="reset" name="rName" value="text"/>
<input type="image" src="path" width="25" height="25"/>
<input type="button" name="bName" value="text"/>

type 为"submit"时，该元素类型为提交按钮，点击后会执行提交表单的动作。
type 为"reset"时，该元素类型为表单重置按钮。
type 为"image"时，该元素类型为图片按钮，点击后会提交表单。
type 为"button"时，该元素类型为普通按钮，点击后无默认操作。

name：按钮的名称。
value：按钮上显示的文字。
src：图片路径。
width：图片宽度。
height：图片高度。

9. 多行文本域

<textarea name="taName" cols="x" rows="y">...</textarea>

<textarea>：多行文本域标志。
name：多行文本域的名称。
cols：显示的列数。
rows：显示的行数。

10. 文件域

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

type 为"file"时，该元素类型为文件域。
name：文件域的名称。

11. 邮箱

<input type="email" name="eName"/>

type 为"email"时，该元素类型为邮箱。
有自动验证邮箱地址格式是否正确的功能。

12. 网址

<input type="url" name="uName"/>

type 为"url"时，该元素类型为网址。
有自动验证url地址格式是否正确的功能。

13. 数字

<input type="number" name="nName" min="0" max="100" step="10"/>

type 为"number"时，该元素类型为数字。
name：该数字元素的名称。
min：允许的最小值。
max：允许的最大值。
step：每次按递增/递减按钮时增加/减少的值。

14. 滑块

<input type="range" name="rName" min="0" max="10" step="2"/>

type 为"range"时，该元素类型为滑块。
name：滑块的名称。
min：允许的最小值。
max：允许的最大值。
step：每次滑动滑块时增加/减少的最小值。

15. 搜索框

<input type="search" name="sName"/>

type 为"search"时，该元素类型为搜索框。
name：搜索框的名称。

16. 隐藏域

<input type="hidden" name="hName" value="text"/>

type 为"hidden"时，该元素类型为隐藏域。
客户看不到，放不需要客户看到的东西。

17. 只读

<input type="text" name="tName" value="text" readonly/>

readonly：只读文本框。

18. 禁用

<input type="submit" value="text" disabled />

disabled：禁用。

19. 表单元素的标注

<label for="abc">标注的文本</lable>
<input type="radio" name="rName" id="abc"/>

<input type="radio" name="sex" id="male"/> <label for="male">男</label>
<input type="radio" name="sex" id="female"/> <label for="female">女</label>

<lable>：表单元素的标注，与表单控件相关联。

for：标注的文本对应的 id 标志。
id：希望被某标注的文本对应时给出的标志。

功能：

增强鼠标的可用性，增强用户体验
自动将标点转移到与该标注相关的表单元素上

20. 综合示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>人人网注册界面</title>
    </head>
    <body>
        <p>
            <img src="images/renren.png" alt="renren" title="renren"/>
        </p>
        <p>人人网，好网站！请填写注册信息：</p>
        <form method="POST" action="http://www.baidu.com/">
            <p>
                <label for="email">电子邮箱：</label>
                <input type="email" name="email" maxlength="50" id="email" readonly value="student@bdqn.cn"/>
            </p>
            <p>
                <label for="pwd">设置密码：</label>
                <input type="password" name="password" maxlength="16" value="" id="pwd"/>
            </p>
            <p>
                <label for="name">真实姓名：</label>
                <input type="text" name="name" maxlength="8" value="" id="name"/>
            </p>
            <p>
                性别：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="sex" id="male" checked/><label for="male">男</label>
                <input type="radio" name="sex" id="female"/><label for="female">女</label>
            </p>
            <p>
                生日：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <select name="year" id="year" > <!--列表项-->
                    <script>
                        for(i=1900;i<1991;i++){
                            document.write("<option value='"+i+"'>"+i+"</option>")
                        }
                        document.write("<option selected value='"+i+"'>"+i+"</option>")
                        for(i=1992;i<2019;i++){
                            document.write("<option value='"+i+"'>"+i+"</option>")
                        }
                    </script>
                </select>年
                <select name="month" id="month" > <!--列表项-->
                    <script>
                        for(i=1;i<11;i++){
                            document.write("<option value='"+i+"'>"+i+"</option>")
                        }
                        document.write("<option selected value='"+i+"'>"+i+"</option>")
                        for(i=12;i<=12;i++){
                            document.write("<option value='"+i+"'>"+i+"</option>")
                        }
                    </script>
                </select>月
                <select name="day" id="day" > <!--列表项-->
                    <script>
                        for(i=1;i<30;i++){
                            document.write("<option value='"+i+"'>"+i+"</option>")
                        }
                        document.write("<option selected value='"+i+"'>"+i+"</option>")
                        for(i=31;i<=31;i++){
                            document.write("<option value='"+i+"'>"+i+"</option>")
                        }
                    </script>
                </select>日
            </p>
            <p>
                身份：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <select name="education" disabled> <!--列表项-->
                    <option value="1">请选择身份</option>
                    <option value="2">群众</option>
                    <option selected value="3">共青团员 </option><!--默认被选中的项-->
                    <option value="4">党员</option>
                </select>
            </p>
            <p>
                <div style="color: blue">&nbsp;&nbsp;&nbsp;
                <img src="images/yanzheng.jpg" alt="yanzheng" title="yanzheng" width="100" height="50"/>
                <u>看不清？换一张</u></div>
            </p>
            <p>
                <label for="yanzheng">验证码：&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="text" name="yanzheng" value="" id="yanzheng"/>
            </p>
            <p>
                <input type="image" src="images/zhuce.png" width="270"/><br> <!--图片按钮，点击后会提交表单-->
            </p>
        </form>
    </body>
</html>