Web前端知识总结：HTML

69 阅读 0 评论 46 点赞

我是靠谱客的博主风趣饼干，最近开发中收集的这篇文章主要介绍Web前端知识总结：HTML，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

HTML 教程- (HTML5 标准)

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML 来创建站点。

HTML 很容易学习！相信您能很快学会它！

HTML 实例

注意：对于中文网页需要使用声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为。

<html>
<head>
<meta charset="utf-8">
<title>kior教程（https://blog.csdn.net/qq_16011889）</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

HTML 标题
HTML 标题（Heading）是通过

<h1 >-<h6> 标签来定义的.

h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。

这里有六个标题元素标签 —— <h1 ><h2 ><h3><h4 ><h5 ><h6 >;，每个元素代表文档中不同级别的内容：

<h1 >表示主标题（the main heading），<h2 > 表示二级子标题（subheadings），<h3 >表示三级子标题（sub-subheadings），<h4 >、<h5 >、<h6 >依次递减字体的大小。

实例

<h1>这是一个标题</h1> 
<h2>这是一个标题</h2> 
<h3>这是一个标题</h3>

img路径问题

./代表是当前路径
…/代表上一级路径
…/…/代表上上一级路径
HTML 图像- 图像标签（）和源属性（Src）
　在 HTML 中，图像由标签定义。
　是空标签，意思是说，它只包含属性，并且没有闭合标签。
　要在页面上显示图像，你需要使用源属性（src）。src指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" alt="some_text">

URL 指存储图像的位置。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
HTML 图像- Alt属性
　alt属性用来为图像定义一串预备的可替换的文本。在编程测试中练习alt属性的使用方法。
　替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			表单标签
				action : 直接提交的地址
				
				method : 
						get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
						post 方式  会将参数封装在请求体中, 没有这样的限制
						
			
			input :
				type: 指定输入项的类型
					text : 文本
					password :  密码框
					radio :		单选按钮
					checkbox :  复选框
					file 	 : 上传文件
					submit   : 提交按钮
					button 	 : 普通按钮
					reset	 : 重置按钮
					hidden  : 隐藏域
					
					date    : 日期类型
					tel     : 手机号
					number   : 只允许输入数字
					
				placeholder : 指定默认的提示信息
				name : 在表单提交的时候,当作参数的名称
				id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
			
			textarea : 文本域, 可以输入一段文本
						cols : 指定宽度
						rows : 指定的是高度
			
			select  : 下拉列表
				option : 选择项
		-->
		<form action="../04-网站首页/网站首页.html" method="post" >
			<!--隐藏域
				主要是用来存放页面上一些ID信息
			-->
			<input type="hidden" value="sadfaldsfkjl@o3214813278" name="uid"/>
			<!--文本输入框-->
			用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" /><br />
			<!--密码框-->
			密码:   <input type="password" placeholder="请输入密码" /> <br />
			确认密码: <input type="password"  /> <br />
			邮箱:  <input type="text"  /> <br />
			
			手机号码: <input type="tel"  /> <br />
			靓照: <input type="file" /> <br />
			
			性别: <input type="radio" name="sex" />男
				 <input type="radio" name="sex"  />女 
				 <input type="radio" name="sex" />妖 <br />
			
			爱好:
				<input type="checkbox" />抽烟
				<input type="checkbox" />喝酒
				<input type="checkbox" />烫头
				<input type="checkbox" />撸代码
				<br />
			
			择偶要求:
				<textarea cols="40" rows="4"></textarea><br />
			籍贯	:
				<select>
					<option>--请选择--</option>
					<option>湖北</option>
					<option>内蒙古</option>
					<option>火星</option>
				</select>
				
				<br />
			出生日期: 
				<input type="datetime-local" /> <br />
			验证码: <input type="text"  /><br />
			
			<input type="submit"  value="注册"/>
			<input type="button"  value="普通按钮"/>
			<input type="reset"  value="重置按钮"/>
		</form>
	</body>
</html>