HTML 超文本标记语言

最新推荐文章于 2024-07-25 11:52:08 发布

Raining39

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量334

点赞数 9

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_52223392/article/details/135424171

版权

HTML 超文本标记语言

1.入门实例

<!DOCTYPE html>
<html>
	<!--这是网页的头部-->
	<head>
		<!--
			网页的元信息
			作用：对网页进行设置
		-->
        <meta charset="utf-8"/>
		<!--网页的标题-->
		<title>This is wxb's Web</title>
		<style type="text/css">
			.c1 {
				color : red;
			}
			.c2 {
				color : gray;
			}
		</style>
		<script>
			function nihao() {
				alert("泥嚎，我的朋友！");
			}
		</script>
	</head>
	<!--
		这是网页的躯干
		内容
	-->
	<body>
		<h1>这是一级标题</h1>
		<p style="color: blue">
		HelloWorld! 
		<br/>
		Hello,my friend!
		</p>
		<p class="c1">泥嚎</p>
		<p class="c2">泥嚎</p>
		<button type="button" onclick="nihao()">泥嚎</button>
		<p>泥嚎</p>
		<p>泥嚎</p>
		<p>泥嚎</p>
	</body>
</html>

<!DOCTYPE html> 声明为HTML5文档

<html></html> html页面的根元素

<head></head> 包含文档的元数据(meta)设置，一般将编码规范设置为"uft-8"

<body></body> 页面的主题部分

<h1></h1> (heading)标题，分为1~6级

<p></p> (paragraph)段落

<br/> 换行

<meta charset=“utf-8”/>

关于编码：
1.告诉浏览器如何编码
2.英文及英文标点不会产生乱码
3.文字在计算机中以二进制存在
4.文字转换成01的组合是由编码表决定的 utf-8
编码 - 将文字根据特定的编码表转换成二进制
解码 - 将二进制序列根据编码表转换为文字
5.乱码是因为编码和解码使用的编码表不同
6.解决乱码要使用相同的编码表

2.HTML 基础标签

2.1 注释

解释说明
阻止代码运行

2.2 排版标签

可用于实现简单的页面布局

段落标签

<p>此为第一段</p>
<p>此为第二段</p>
<p>此为第三段</p>
<p align="left">段落左对齐</p>
<p align="center">段落居中</p>
<p align="right">段落右对齐</p>

水平线标签

<!-- 这是一条水平线  -->
<hr/>
<hr width="50%" size="5px" color="#FFFFFF" align="center"/>

width: 水平线的长度（像素表示 5px 百分比表示 50%）
size: 水平线的粗细 5px
color: 水平线的颜色
align: 水平线的对齐方式

2.3 标题标签

随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行。

一级标题字体最大，六级标题字体最小

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

2.4 基本文字标签

font标签处理网页中文字的显示方式

size属性：用于设置字体的大小，最小1号，最大7号

face属性：用于设置字体

color属性：用于设置字体的颜色

<font size="7" color="yellow" face="微软雅黑">设置字体</font>

2.5 文本格式化标签

使用标签实现标签的样式处理

<b>粗体标签</b><br/>
<strong>加粗</strong><br/>
<em>强调字体</em><br/>
<i>斜体</i><br/>
<small>小号字体</small><br/>
<big>大号字体</big><br/>
<p>上标标签<sup>2</sup></p>
<p>下标标签<sub>2</sub></p>
<del>删除线</del>

2.6 列表标签

无序列表：无序符号定义

type属性用来定义符号的类型

disc: 实心圆
circle：空心圆
square: 黑色方块

<ul type="circle">
    <li>JavaSE</li>
    <li>JavaWeb</li>
    <li>SSM</li>
    <li>S
        pringBoot</li>
</ul>

有序列表：有序符号定义

type属性用来定义符号的类型

1：数字类型
A: 大写字母类型
a：小写字母类型
i：小写古罗马
I：大写古罗马
start：定义起始值

<ol type="1" start="1">
    <li>JavaSE</li>
    <li>JavaWeb</li>
    <li>SSM</li>
    <li>SpringBoot</li>
</ol>

列表可以相互嵌套

<ol type="1" start="1">
    <li>JavaSE
        <ul>
            <li>Java开发环境搭建</li>
            <li>变量</li>
            <li>程序结构</li>
        </ul>
    </li>
    <li>JavaWeb</li>
    <li>SSM</li>
    <li>SpringBoot</li>
</ol>

2.7 图片标签

在页面指定位置处中引入一幅图片

src属性：规定显示图像的URL；
width属性：设置图像的宽度；
height属性：定义图像的高度；
alt属性：规定图像的替代文本，图片无法加载时显示；
title属性：鼠标悬停时显示的文本。

<img src="./img/pic1.jpg" width="100px" height="100px" alt="大脑" title="brain">

关于路径：

./ 表示当前路径下
…/ 表示上一级路径下
什么都不写表示当前路径下

<!-- 当前路径下，和当前html同一级目录下 -->
<img src="./img/pic1.jpg" width="100px" height="100px" alt="大脑">
<!-- 上一级路径下，当前html上一级目录下 -->
<img src="../img/pic1.jpg" width="100px" height="100px" alt="大脑">
<!-- 当前路径下，和当前html同一级目录下 -->
<img src="img/pic1.jpg" width="100px" height="100px" alt="大脑">

2.8 链接标签

文档的任何部分（如文本、页面、表单、动画或图像等）都可用作超级链接，超级链接可用于指向网站的不同页面或页面的特定部分

<!--
	href属性：指定连接路径，既可以是本地的路径，也可以是网络中的路径
	title属性：指定连接提示文字
	target属性：连接目标窗口打开方式，target的取值如下
		_blank:在新窗口中打开链接文档
		_self:默认值 在相同框架中打开被链接文档
		_parent:在父框架集中打开被链接文档（了解）
		_top:在整个窗口中打开被链接文档（了解）
	title属性和target属性可以没有
-->
<a href="https://www.baidu.com" title="百度" target="_blank">百度</a>

当一个网页的主题较多或内容较长时，可以在网页内建立多个标记点，将超链接指向这些标记点，使浏览者能快速找到要阅读的内容

<!-- 创建锚点 -->
<a name="start"></a>

<!-- 创建能回到start位置的连接 -->
<a href="#start">回到顶部</a>

3. HTML 表格标签

3.1 表格作用

数据展示
布局

3.2 表格组成

在这里插入图片描述

table：定义表格
caption：定义表格标题
th：定义列标题
tr：定义表格行
td：定义表格单元

<!-- 员工信息表 -->
<table border="1" style="border-collapse: collapse; width: 400px;">
    <!-- 表格标题 -->
    <caption>员工信息表</caption>
    <!-- 行 -->
    <tr>
        <!-- 列标题 -->
        <th>工号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>001</td>
        <td>马化腾</td>
        <td>男</td>
        <td>...</td>
    </tr>
</table>

3.3 跨行跨列的表格

跨行跨列的表格实际就是合并单元格

跨行跨列属性全部在td标记中设置，属性如下：

rowspan：跨行属性
colspan：跨列属性

在设计表格时首先设计行数，再观察跨行和跨列。

设计如下图所示的课程表

	<tr>
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>数学</td>
        <td>自然</td>
        <td>社会</td>
        <td>体育</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>语文</td>
        <td>社会</td>
        <td>自然</td>
        <td>体育</td>
    </tr>
    <tr>
        <td>晚上</td>
        <td colspan="5" style="text-align: center;">自习</td>
	</tr>

4. HTML 表单

4.1 表单

与网页有交互功能的网页，获取用户输入的数据，把表单的数据提交到该地址上进行处理

4.2 基本框架

<form action="服务器地址" method="请求方式" enctype="表单提交的类型">
    ...
</form>

action: 表示动作，值为服务器的地址，吧表单的数据提交到该地址上处理

method：提交表单的方式，值为GET或POST

GET：
默认传输方式
通过地址传递表单中的数据
不建议传递敏感数据
不能传递大量的数据，每次只能传递1024字节
不能上传附件

POST：
不通过地址上传，相对安全
可以传递海量数据
可以上传附件

enctype: 表单的提交类型

默认值： application/x-form-urlencoded 普通表单

multipart/form-data 多部分表单（一般用于文件上传）

4.3 input 元素

作为表单中的重要元素，可根据不同type属性值呈现为不同状态，value属性表示初始值，name属性表示当前表单元素对象，表单元素名称。

常见type值：

text：单行文本域，常用与较短信息的输入，用户名，联系方式等
size:指定控件的宽度，以字符为单位
maxlength:可以接收的最大字符数

password：密码域，用来输入密码，掩码显示
size指定控件的宽度
maxlength:可以接收的最大字符数

radio：单选按钮，限制选择一项的操作，如性别
同组name值相同
checked指定是否被选中

checkbox：复选按钮，允许选择多个的操作，如个人爱好
同组name值相同
checked指定是否被选中

button：普通按钮
submit：提交表单按钮
reset：重置表单按钮
date：日期
time：时间
datetime：日期+时间
email：电子邮件
number：数值
max规定允许的最大值
min规定允许的最小值
value默认值

file：文件域，用于文件上传操作
hidden：隐藏域
range：范围
max规定允许的最大值
min规定允许的最小值
step规定合法的数字间隔
value规定默认值

color：取色按钮
month：类型允许选择一个月份

<form action="a.html" method="post">
    <!--
        type表示表单元素类型
        value表示初始值
        name表示表单元素名称，通常用于给服务器传递数据时使用
    -->
    账号:<input type="text" value="aaa" name="username" /><br/>
    密码:<input type="password" name="password" /><br/>
    <!--
        同组name相同
        checked表示选中
    -->
    性别:<input type="radio" name="gender" value="男" checked />男<br/>
    <input type="radio" name="gender" value="女" />女<br/>
    <!--
        同组name相同
        checked表示选中
    -->
	爱好:<input type="checkbox" name="hobby" value="sleep1" checked/>睡觉
    <input type="checkbox" name="hobby" value="sleep2"/>睡觉1
    <input type="checkbox" name="hobby" value="sleep3"/>睡觉2<br/>
    <!-- 按钮 -->
    <input type="submit" value="注册" />
    <input type="reset" value="重置" />
    
    
    <!-- 以下了解即可 -->
    <!-- 
        color 用于选取颜色
        RGB 十六进制数表示颜色
        R---Red红色
        G---Green绿色
        B---Blue蓝色
        六位十六进制的值
        白  #FFFFFF
        黑  #000000
   	-->
    <input type="color" name="color" /><br/>
    <!-- date 日期 -->
	<input type="date" name="date" /><br/>
	<!-- email @ -->
	<input type="email" name="email" /><br/>
	<!-- month 月份 -->
	<input type="month" name="month" /><br/>
	<!-- number 数字
			min最小值
			max最大值
			step每次变化的值
			value默认值
	-->
	<input type="number" name="number" min="1" max="10" step="2" value="5" /><br/>
	<!--
		range 滑动条
	-->
	<input type="range" name="range" min="1" max="100" step="1" value="1"/><br/>
	<!-- 
		time 时 分
	-->
	<input type="time" /><br/>
</form>

使用表单元素完成登录页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
	</head>
	<body>
		<form action="http://www.baidu.com" method="post">
			<!-- 设置宽度为300px -->
			<fieldset style="width: 300px;">
				<legend>用户登录</legend>
				<p>
					<label>账号</label>
					<!-- placeholder提示信息
						autofocus 自动获得焦点
					-->
					<input type="text" name="username" placeholder="请输入用户名" autofocus />
				</p>
				<p>
					<label>密码</label>
					<input type="password" name="password" placeholder="请输入密码" />
				</p>
				<!-- p中的内容居中 -->
				<p style="text-align: center;">
					<input type="submit" value="登录" />
					<input type="reset" value="重置" />
				</p>
			</fieldset>
		</form>
	</body>
</html>

4.4 select 列表

单选下拉列表：<select></select>

列表项：<option></option>

默认选中属性：selected="selected"

<!-- name:当前下拉列表的名称 -->
<select name="province">
    <option value="beijing">北京市</option>
    <option value="tianjin">天津市</option>
    <option value="chongqing" selected="selected" >重庆市</option>
</select>

多选列表：multiple=“multiple”

<select name="hobby" multiple="multiple">
    <option value="game">网游</option>
    <option value="swim">游泳</option>
    <option value="learn">学习</option>
    <option value="sleep">睡觉</option>
</select>

4.5 textarea元素(文本域)

行文本框：< textarea cols="列" rows="行">< /textarea>

人生格言：<textarea rows="5" cols="5"></textarea><br/>

4.6 特殊字符

< <

> >

空格  

& &

© ©

<p>a&lt;b</p>
<p>a&gt;b</p>
<p>a&nbsp;&nbsp;&nbsp;b</p>
<p>&copy;</p>

=“multiple”

<select name="hobby" multiple="multiple">
    <option value="game">网游</option>
    <option value="swim">游泳</option>
    <option value="learn">学习</option>
    <option value="sleep">睡觉</option>
</select>

4.5 textarea元素(文本域)

行文本框：< textarea cols="列" rows="行">< /textarea>

人生格言：<textarea rows="5" cols="5"></textarea><br/>

4.6 特殊字符

< <

> >

空格  

& &

© ©

<p>a&lt;b</p>
<p>a&gt;b</p>
<p>a&nbsp;&nbsp;&nbsp;b</p>
<p>&copy;</p>

Raining39

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
HTML 超文本标记语言

/.c1color;.c2color;</functionnihaoalert"泥嚎，我的朋友！;</</</stylecolorblue</</</onclicknihao</</</</</</声明为HTML5文档html页面的根元素包含文档的元数据(meta)设置，一般将编码规范设置为"uft-8"页面的主题部分(heading)标题，分为1~6级(paragraph)段落换行关于编码：1.告诉浏览器如何编码2.英文及英文标点不会产生乱码3.文字在计算机中以二进制存在。
复制链接

扫一扫