HTML学习

目录

• 初始HTML
  • HTML
  • W3C标准
• 网页基本信息
• 网页基本标签
  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 特殊符号
• 图像标签
  • 常见的图像格式
• 链接标签
  • 页面链接
  • 锚链接
  • 功能性链接
• 行内元素和块元素
  • 块元素
  • 行内元素
• 列表
  • 什么是列表
  • 列表的分类
• 表格
  • 为什么使用表格
  • 基本结构
• 视频和音频
• 页面结构分析
• iframe内联框架
• 表单
• 表单语法
• 列表框文本域和文件域
  • 下拉框
  • 文本域
  • 文件域
• 搜索框滑块和简单验证
• 表单的应用
• 表单初级验证
  • 常用方式

初始HTML

HTML

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

W3C标准

W3C

• World Wide Web Consortium（万维网联盟）
• 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
• http://www.w3.org/
• http://www.chinaw3c.org/

W3C标准包括

• 结构化标准语言（HTML，XML）
• 表现标准语言（CSS）
• 行为标准（DOM，ECMAScript）

网页基本信息

注释：

网页基本标签

标题标签

<h1>一级标签</h1>

<h2>二级标签</h2>

<h3>三级标签</h3>

<h4>四级标签</h4>

<h5>五级标签</h5>

<h6>六级标签</h6>

段落标签

<p></p>段落标签，用于分段

换行标签

<br/>自闭合标签，换行

水平线标签

<hr>

字体样式标签

<strong></strong>粗体

<em></em>斜体

特殊符号

空格

小于号<

大于号>

版权符号©

图像标签

常见的图像格式

• JPG

• GIF

• PNG

• BMP

• ...

<img src="path" alt="text" title="text" width="x" height="y">
<!--图片标签-->
path:图像地址
alt:图像的替代文字
title:鼠标悬停提示文字
width:图像宽度
height：图像高度

链接标签

页面链接

本地或者网络上

<a href="path" target="目标窗口位置">链接文本或图像</a>
href:跳转页面路径
target：表示窗口在哪里打开
      _blank:在新标签中打开
      _self:在自己的网页中打开

锚链接

• 需要一个锚标记
• 跳转到标记

<a name="top">顶部</a>
<ahref="#top">跳转到顶部</a>

功能性链接

邮件链接：mailto

QQ链接：qq推广

行内元素和块元素

块元素

• 无论内容多少，该元素独占一行
• （p，h1-h6...）

行内元素

• 内容撑开宽度，左右都是行内元素的可以再排在一行
• （a . strong . em）

列表

什么是列表

• 列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应的信息

列表的分类

• 无序列表
• 有序列表
• 自定义列表

有序列表
<ol>
	<li>Java</li>
	<li>Python</li>
	<li>运维</li>
	<li>前端</li>
	<li>C/C++</li>
</ol>

有序列表

无序列表
<ul>
	<li>Java</li>
	<li>Python</li>
	<li>运维</li>
	<li>前端</li>
	<li>C/C++</li>
</ul>

无序列表
<ul>
	<li>Java</li>
	<li>Python</li>
	<li>运维</li>
	<li>前端</li>
	<li>C/C++</li>
</ul>

自定义列表
dl:标签
dt:列表名称
dd:列表内容
<dl>
	<dt>Java</dt>
	<dd>Python</dd>
	<dd>运维</dd>
	<dd>前端</dd>
	<dd>C/C++</dd>
</dl>

表格

为什么使用表格

• 简单通用
• 结构稳定

基本结构

• 单元格
• 行
• 列
• 跨行
• 跨列

<tr>行
<td>列
<td colspan="">跨列
<td rowspan="">跨行
<table>
	<tr>
		<td colspan="4">
		<td>
	</tr>
</table>

视频和音频

<video src="" controls autoplay></video>
<audio src="" controls autoplay></audio>

页面结构分析

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

iframe内联框架

name
<iframe src="" name=""></iframe>

表单

get post

<form method="post" action="result.html">
	<p>名字：<input name="name" type="text"></p>
	<p>密码：<input name="password" type="password"></p>
	<p>
		<input type="submit" name="Button" value="提交">
		<input type="reset" name="Reset" value="重填">
	</p>
</form>

表单语法

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

• 文本输入框

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

• 密码框

<input type="password" name="">

• 单选框

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

• 多选框

<input type="checkbox" value="" name="h">1
<input type="checkbox" value="" name="h" checked>2
<input type="checkbox" value="" name="h">3

• 按钮

<input type="button" name="" value="">

列表框文本域和文件域

下拉框

<select name="列表名称" id="">
    <option value="选项的值">中国</option>
    <option value="选项的值">美国</option>
    <option value="选项的值" selected>法国</option>
    <option value="选项的值">瑞士</option>
    <option value="选项的值">西班牙</option>
</select>

文本域

<textarea name="" id="" cols="30" rows="10">文本</textarea>

文件域

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

搜索框滑块和简单验证

验证

<input type="email" name="email">
<input type="url" name="url">
<input type="number" name="number" max="100" min="0" step="10">

滑块

<input type="range" min="0" max="100" name="volumn" step="1">

搜索

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

表单的应用

• 隐藏域

加属性 readonly disabled hidden

<label for="mark">增强鼠标可用性</label>
<input type="text" id="mark">

• 只读
• 禁用

表单初级验证

常用方式

• placeholder:提示消息
• required：非空判断
• pattern：正则表达式判断