Html学习笔记（主体结构&amp;教程资料）

么是HTML？

HTML（Hypertext Marked Language）超文本标记语言
文件的后缀名.html .htm
Hypertext可以在文件中标识图片、链接、表格、文本等。
Marked<或>以及字符串组成
是一种编程语言
-浏览器解释的语言

HTML主体标记

代码分为三部分编写

<html>是网页文件的最外层标记
 <head>
之间的文本是头信息，不会显示在浏览器中，包括基本的描述，整个网页的公共属性
 </head> 
 <body>
是网页的主体部分，正文：文字、图片、链接、表单等
 </body>
</html>

HTML文档头部标记

<head>头部标记</head> 
<title></title>只能有一个 
<base/>只能有一个 
<link>可以有多个 
<meat>可以有多个 
<meat name="" content=""> 
<meat http-equiv="" content="">

title

定义网页标题，显示在浏览器的标题栏中有利于搜素引擎（也是在搜索引擎中显示的标题）

base

基底网址标记
用于设定浏览器中文件的绝对路径
网页中的文件只需要写下文件的相对路径即可，这个路径就是base指定下的路径

link

设置外部文件的链接标记
用于确定本页面和其他文档之间的关系

meta

两种用法

name用于在网页中加入关于网页的描述信息

网页的关键字，网页描述信息

http-equiv：属性用于在HTME文档中模拟HTTP协议的

响应消息头，例如，告诉浏览器，是否缓存页面，

使用什么样的字符集显示网页内容

meta的name标签属性：不是自己定义的值

Keywords:网页的关键字

Description：网页的描述 Robots：index noindex follow nofollow all none Author

copyright:版本

mate标签的http-equiv属性设置

Content-Type :网页文档类型，刷新页面

<meta http-equiv="refresh" content="3; url=http://wwww.baidu.com/">
<meta http-equiv="Windows-Target" content="_top"
此条语句的作用：禁止别人把你的网页放在小窗体里，一旦链接到你的网页，会全屏显示

Page=Enter和Page=Exit

<meta http-equiv="Page-Enter" content="revealTrans(Transition=5,Ouration=1.000)">
<meta http-equiv="Page-Exit" content="revealTrans(Transition=8,Ouration=1.000)">
为页面进入和退出特效，一共有23种

主体标记<body>

在它中放置网页中所有内容

<body bgcolor="#ff00ff" text="#00ff00" link="red"
alink=""(鼠标单击颜色) topmargin=""（顶部距离）
vlink=""(鼠标放在上时的颜色)
leftmargin=""（默认左距离） background=""(放置背景图片)>

只要是可以用样式控制的，就不用HTML本身的属性，可以用CSS控制

Id name class style 通用属性，所有的元素都可以使用

DTD

文档类型定义

<!DDCTYPE HTML PUBLIC"-//w3c//DTD XHML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transition1.dtd"(dtd的地址，按照dtd地址的格式显示本页面)>

想要学习Html的伙伴，私信松鼠并回复：Html

即可领取Html的教学资料和教学视频了（注意回复的大小写要一致哦~）

TML标签：

基本标签：

<html></html>双标签开头结尾 HTML标签为最大的标签称为根标签

<head></head> 文档头部标签且必须设置title

<title></title> 页面标题

<body></body> 文档的主体包含页面的内容

<h1>-<h6> HTML提供6个等级的页面标题有大到小

<p></p> p标签用于定义段落可以将页面分为若干个段落根据窗口大小自动换行

<br/>单标签换行标签（break打断）

格式化标签：

加粗 <strong></strong>or<b></b>

斜线 <em></em>or<i></i>

删除线 <del></del>or<s></s>

下划线 <ins></ins>or<u></u>

div和span标签：

没有语义属于一种盒子来装内容

<div></div> 表示分割分区用来布局一行一个大盒子

<span></span>意为跨度，跨距一行可以哦有多个小盒子

图像标签：

<img src="图像路径(url)"/> 定义页面中的图像

图像标签包含多个属性

src 图片路径必须属性

alt 文本替换文本图像不能显示的文字

title 文本鼠标放到图像上显示文字

width 像素宽度

height 高度

border 边框

相对路径和绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

分类：下级路径/ 上级路径../

绝对路径：是指目录下的绝对位置，如硬盘中的路径或网路地址

超链接标签：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href用于指定链接目标的url地址(必须属性)

target用于指定链接打卡方式 _self为默认值 _blank为在新窗口打开方式

锚点链接：可以快速到页面某个位置

在链接文本中的href属性中，设置属性值为#名字的形式，如<a href="#two">目标</a>

找到目标位置标签，里面添加一个id属性 = 名字，如：<h3 id="two">目标</h3>

注释：

快捷键CTRL + /

特殊字符：

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
		半个空白位
		一个空白位
		不断行的空白

表格标签：

<table></table> 是用于定义表格的标签

<tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中

<tb></tb> 用于定义表格的单元格，必须嵌套在<tr></tr>标签中

<td> 元素中的文本通常是普通的左对齐文本。字母td指表格数据(table data)，即数据单元格的内容

表头单元格标签：

<th>标签表示HTML表格的表头部分 <th> 元素中的文本通常呈现为粗体并且居中。

表格属性：

align left center right 规定表格相对于周围元素的对齐方式
border 1or"" 规定表格单元是否拥有边框默认为"",表示没有边框

cellpadding 像素值规定单元边沿与其内容的空白，默认1像素

cellspacing 像素值规定单元格直接的空白默认2像素

with 像素值or百分比规定表格的宽度

合并单元表格方式：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

列表标签：

<ul>标签表示无序列表里面只能包含li

<ol>有序标签里面只能包含li

<li>相当于一个容器定义列表项与<ui>or<li>嵌套使用 li里面可以包含任何标签

<dl>标签用于定义描述列表(或自定义列表),该标签会与<dt>(定义项目和名字)和<dd>(描述每一个项目名字)一起使用

表单标签：

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist> New	指定一个预先定义的输入控件选项列表
<keygen> New	定义了表单的密钥对生成器字段
<output> New	定义一个计算结果

<input>标签用于收集用户信息包含一个type属性可以有多种样式

<input type="属性值" />

属性值：

button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

<label>标签

<label> 标签为 input 元素定义标注（标记）。 label是标注的意思

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c

行一行的吸引人

表单呀表单

W3C标准

World Wide WebConsortium(万维网联盟)

成立于1994.web技术领域,最具权威和影响力的国际中立性技术标准机构

http://www.w3.org/

http://www.chinaw3c.org/

W3C标准包括

结构化标准语言(HTML,XHTML,XML)

表现标准语言(CSS)

行为标准(DOM,ECMAScript)

编辑工具

>记事本

>Dreamweaver

>WebStorm (企业主流)

基本结构

<!doctype html>

<html>

<head>

网页头部

</head>

<body>

网页主体

显示的网页主题内容

</body>

</html>

===========================================================

网页的基本标签

>标题标签

>段落标签

<p></p>

>换行标签

>水平线标签

<hr/>

>字体样式标签

>注释以及特殊代码

空格 &nbsp

大于号 &gt

小于号 &lt

引号 &quot

版权符号 &copy

>图像标签

常见的图像格式:JPG GIF PNG BMP

>超链接标签

<a href="path" target="_self ^ _blank">连接文本或头像</a>

>锚链接标签

实现由甲位置跳转到乙位置

>功能性链接

===========================================================

行内元素和块元素

行内元素排在一行

块元素独占一行<p></p> <h1></h1>

===========================================================

列表

>有序列表

<ul>

</ul>

>无序列表

<ul>

</ul>

>定义列表

<dl>

</dl>

===========================================================

表格

特点

简单通用

结构稳定

基本结构

行

列

单元格

</tr>

<tr>

</tr>

</tr>

</table>

===========================================================

网页中的媒体元素

如何实现在网页上播放视频和音频

1,第三方自主开发的播放器

2,FLash

3,HTML5媒体元素

视频元素

</video>

音频元素

</oudio>

===========================================================

iframe框架

===========================================================

表单

表单元素

>单选按钮 type="radio"

<from>

</from>

-----------------------------------------------------------

>复选框 type="checkbox"

<from>

<input name="名字" type="checkbox" value="选择值1" checked默认选中/>提示1

<input name="名字" type="checkbox" value="选择值2" checked默认选中/>提示2

<input name="名字" type="checkbox" value="选择值3" checked默认选中/>提示3

</from>

-----------------------------------------------------------

>下拉列表框

</select>

-----------------------------------------------------------

按钮

>重置按钮type="reset"

>提交按钮type="submit"

>button按钮

>图片按钮 type="image"

>文件域 type="file"

>邮箱type="emil"

>网址type="url"

>数字 type="number"

>滑块 type="range"

>搜索框 type="search"

表单元素的语法

method和action属性

常见的表单元素

input(text、password、radio、checkbox、submit、reset、email、url、number、range、search)、select、textare

===========================================================

表单的高级应用

>隐藏<input name="名字" type="text" value="值1" readonly/>

>禁用<input type="submit" value="保存" disabled/>

>标注

===========================================================

表单的初级验证

1,减轻服务器的压力

2,保证数据的可行型和安全性

>初级验证的方法

>placeholder属性(提示信息)

>required属性(必填项)

>pattern属性(符合正则表达式)

在线咨询

上一篇：Css实现手机端页面强制横屏
下一篇：一篇文章带你了解CSS 文本样式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Html学习笔记（主体结构&amp;amp;教程资料）

么是HTML？

HTML主体标记

HTML文档头部标记

DTD

想要学习Html的伙伴，私信松鼠并回复：Html

即可领取Html的教学资料和教学视频了（注意回复的大小写要一致哦~）

TML标签：

基本标签：

格式化标签：

div和span标签：

图像标签：

超链接标签：

注释：

特殊字符：

表格标签：

列表标签：

表单标签：

<label>标签

您的项目需求

Html学习笔记（主体结构&教程资料）