前端基础-HTML

引自狂神说Java：https://space.bilibili.com/95256449/video

1. 初始HTML

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

2. 网页基本信息

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>
<!--注释内容
<!DOCTYPE html>声明为 HTML5 文档
<html>元素是 HTML 页面的根元素
<head>元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为utf-8。
<title>元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1>元素定义一个大标题
<p>元素定义一个段落
-->

3. 网页基本标签和属性

标题标签:h1-h6
段落标签:<p></p>
换行标签:<br>
水平线标签:<hr/>
字体样式标签:<strong></strong>、<em></em>、<u></u>
注释和特殊符号:&nbsp;&copy;&gt;&lt;&ge;&le;

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

4. 图像标签

<img src="图片的相对路径" alt="图片没有正常显示时显示此处文字" width="304" height="228">

5. 超链接标签

<a href="url" target="目标窗口位置"></a>
<a href="url" target="_blank"></a>
常用有文本超链接和图片超链接、锚链接（定义name）、功能链接、邮件链接、QQ链接
<!--QQ推广-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1723265689&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1723265689:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

6. 块元素和行元素

块元素：无论内容多少，该元素独占一行。

p、h1-h6

行内元素：内容撑开宽度，左右都是行元素的可以排在一行

a、strong、em

7. 列表标签

<!--有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
</ol>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
</ul>
<!--自定义列表-->
<dl>
    <dt></dt>
    
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
</dl>

8. 表格标签

表格结构语义标签：
1.<table>：表格根元素。
2.<thead>：表格头。
3.<tbody>：表格体。
4.<tfoot>：表格尾，一般可忽略该结构。
5.<tr>：表格行。

表格内容标签：
    1.<th>：表头单元格。
    2.<td>：表体单元格。
跨列：colspan
跨行：rowspan
单元格内边距：cellpadding
单元格外边距：cellspacing
col 和 colgroup 用于便捷定义表格指定列的样式。

9. 媒体元素

video
audio

<video width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

10. 页面结构分析

元素名	描述
header	头部区域的内容
footer	底部区域的内容
section	页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（侧边栏）
nav	导航类辅助内容

11. iframe内联框架

<!--frameborder="0"移除边框-->
<iframe src="demo_iframe.htm" name="hello-iframe" width="200" height="200" frameborder="0"></iframe>

12. 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)、按钮、文件域、文本域、搜索框、滑块、简单验证等等。

属性	说明
type	指定元素的类型：text、password、checkbox、radio、submit、reset、file、hidden、image、button、email、url、number，默认为text。
name	默认内容
value	元素的初始值，type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小用字符为单位；当type为其他类型时，宽度用像素为单位。
maxlength	当type为text或password时，输入的最大字符数
checked	当type为radio或checkbox时，按钮是否被选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<form action="#" method="post">

			<!-- 文本 -->
			<p>名字:<input type="text" name="username" placeholder="请输入用户名" required=""></p>
			<p>密码:<input type="password" name="password"></p>


			<!-- 单选框 -->
			<p>单选框:
				<input type="radio" value="boy" name="sex" checked>男
				<input type="radio" value="girl" name="sex">女
			</p>
			<!-- 复选框 -->
			<p>爱好:
				<input type="checkbox" value="sleep" name="hobby" checked>睡觉
				<input type="checkbox" value="code" name="hobby">敲代码
				<input type="checkbox" value="chat" name="hobby">聊天
				<input type="checkbox" value="game" name="hobby">游戏
			</p>

			<!-- 按钮 -->
			<p>按钮:
				<input type="button" name="btn1" value="点击变长">
				<input type="image" src="./static/images/bg.jpg">
			</p>

			<!-- 下拉框 -->
			<p>
				<select name="省份" id="">
					<option value="beijin">北京</option>
					<option value="hubei" selected>湖北</option>
					<option value="sichuan">四川</option>
				</select>
			</p>
			
			<!-- 文本域 -->
			<p>反馈：
				<textarea name="textarea" cols="50" rows="10">
					文本内容
				</textarea>
			</p>
			
			<!-- 文件域 -->
			<p>
				<input type="file" name="files">
				<input type="button" value="上传" name="upload">
			</p>
			
			<!-- 邮件验证 -->
			<p>邮箱：
				<input type="email" name="email">
			</p>
			<!-- url验证 -->
			<p>URL:
				<input type="url" name="url">
			</p>
			<!-- 数字验证 -->
			<p>Number:
				<input type="number" max="100" min="0" step="1">
			</p>
			<!-- 滑块 -->
			<p>音量：
				<input type="range" name="voice" id="" value="" min="0" max="100" step="2" />
			</p>
			<!-- 搜索框 -->
			<p>搜索框：
				<input type="search" name="search">
			</p>
			
			<!-- 增强鼠标可用性 -->
			<p>
				<label for="mark">你点我试试</label>
				<input type="text" id="mark">
			</p>
			
			<p>
				<input type="submit" value="提交">
				<input type="reset" value="清空表单">
			</p>
		</form>
	</body>
</html>

13. 表单的常用属性和验证

常用属性：

隐藏域 hidden
只读 readonly
禁用 disabled

简单验证：

placeholder 提示信息
required 非空判断
pattern 正则表达式判断