【HTML入门基础知识】从零开始，我要加油！---致HTML
前言：
今天来和大家分享一下近期自己整理的HTML笔记，希望会对你的学习有所帮助！
***本章关键词：HTML头部格式；常见的块级标签；常见的行级标签；表格；表单。
| 一、HTML头部格式 |
一、HTML文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
二、头部标签详解
1、文档声明：<!DOCTYPE html>
HTML5已经简化为上述样式~
注意：文档声明必须有！而且必须在文档页面的第一行！！！
***HTML4.01之前的文档声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
2、头部：<head></head>
Head用于表示网页的元数据：即描述网页的基本信息。
3、mete标签
①charset属性：单独使用。设置文档字符集编码格式。
>>>写法：<meta charset="utf-8" >
>>>常见的字符集编码格式：
a.GB-2312:国标码，简体中文
b.GBK:扩展的国标码，简体中文
c.UTF-8：万国码 Unicode码（常用）基本兼容各国语言
②http-equiv属性：将我们的信息写给浏览器看，让浏览器按照这里面的要求执行
需要配合content属性使用，主要声明浏览器如何解释译文。
（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）
>>>写法：<mete http-equiv="属性值" content="属性值详细内容"></mete>
eg:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
>>>常用属性值：
Content-Type （文档类型）HTML4.01之前的文档内容编码声明
refresh 网页定时刷新
set-Cookie 设置浏览器cookie缓存
③name属性：需配合content属性使用，主要用于给收索引擎提供必要信息
>>>写法：<mete name="属性值" content="属性值常见内容"></mete>
>>>重要属性值：
author 作者，声明网站作者，常用公司网址表示
keywords 网站关键字，多个关键字用英文逗号分隔
description 网页描述，收索引擎显示在title下的描述内容
*http-equiv和name属性，必须与content属性配合使用，前两者只是用来声明即将修改那些属性值，而实际的属性值内容，在content中描述。
eg：
<!--声明文件的编码格式-->
<meta charset="utf-8" > <!--作者-->
<meta name="anthor" content="http://www.CC.com"/> <!--网页关键字：多个关键字用英文逗号分隔-->
<meta name="keywords" content="html5,网页，Web前端开发"/> <!--网页描述：搜索网站时，title下面的解释文字。至关重要！！-->
<meta name="discription" content="这是我开发的第一个网页"/> <!--title标签：网页的标题，即网页选项卡上的文字-->
<title>我的第一个网页</title>
4、link标签
①作用：用于为网页链接各种文件（例如：链接网页图标（title前的小logo））
②常用属性：
rel:用于表明被连接文件与当前文件的关系。
此处选icon,表明被连接图片是当前网页的icon图标。
type:表明被连接文件是什么类型，可以省略
href:表明链接文件的地址
eg:
<link rel="icon" type="image/x-icon" href="图标路径"/>
| 二、常见的块级标签 |
1、HTML的标签分类
①块级标签：自动换行、前后隔一行
②行级标签：按行逐一显示
2、常见的块级标签
①标题标签
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
②水平线<hr/>
③段落<p><p/>
④换行<br />
eg：
<p>这是P标签中的一个段落，这是P标签中的一个段落，这是P标签中的一个段落</p>
<p>这是P标签中的一个段落，这是P标签中的一个段落<br/>这是P标签中的一个段落</p>
⑤引用<blockquote></blockquote>
表明标签中的文字，为引用的内容，浏览器显示为段落缩紧
cite属性，表明引用的来源，一般为引用的网址URL
eg：
<blockquote cite="http://www.jredu100.com">
我是引用的ＷＷＷ。。吼吼吼哈哈哈哈哈哈哈
</blockquote>
⑥预格式标签：<pre></pre>（一般来承载代码，格式！）
浏览器(默认显示样式)解析时：
①显示为等宽字体
②代码中的换行，空格等元素可在浏览器中直接显示。
<pre>
一二三四五
一二三四五
</pre>
⑦有序列表ol (order list)
<ol>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ol>
⑧无序列表ul (unorder list)
<ul>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ul>
⑨定义描述列表
<dl>
<dt>标题</dt>
<dd>描述项</dd>
</dl>
一般情况下，标题dt只有一项，描述项dd可以有N多项。
浏览器显示时，标题格式会显示，显示缩进。
eg：
<dl>
<dt>这是dl列表的标题</dt>
<dd>描述项1</dd>
<dd>描述项2</dd>
<dd>描述项3</dd>
<dd>描述项4</dd>
</dl>
⑩图片组合标签figure
①<figure>标签有两个子标签；
②浏览器显示为
<figure>
<img src="img/3.jpg" />
<figcaption>这是图片的标题。</figcaption>
</figure>
（11）分区标签div
常配合CSS使用，为网页中的最常用的分区标签，常用于网页布局使用
eg：
<div style="width:100%; height:100px; background-color:red;">
<h1>我是div里面的标题</h1>
这是div里面的文字。
</div>
| 三、常见的行级标签 |
***常见的行级标签
span（文本）、img（图片）、em（强调）、strong（强调）、q（短引用）、a（超链接）、
i（倾斜）、b（加粗）、small（缩小字体）
1、span（文本）:用于包裹一部分文字，进行特定样式的修改。
eg:
小希<span style="color:red; font-size:36px;">很萌</span>!!!<br />
2、倾斜/加粗
em:浏览器会显示倾斜
strong:浏览器会显示加粗
i：倾斜
b：加粗
①em和i都能倾斜，strong和b都能加粗，但是strong和em多了一层强调的语义。可以帮助收索引擎快速抓取网站重点,而且HTML5要求开发者尽可能实现代码的语义化。
②em和strong都表示强调，而strong得强调程度要大于em，em和strong标签均可多成嵌套，表示强调程度的递增
eg:
<em>我被em标签强调了！！</em><br />
<strong>我被strong标签强调了！！</strong><br />
<i>我被i标签倾斜了！！</i><br />
<b>我被b标签加粗了！！</b><br />
3、q（短引用）：常用于一句话的引用，cite属性表示引用来源
浏览器解析时，会在内容的前后插入双引号
eg:
<q cite="http://www.baidu.com">我是用q标签声明的一句话</q>
small（缩小字体）：small标签可以多层嵌套，表示比默认字体小一号
直到字号小到最小号为止
big（放大字体）：同small可以多层嵌套，直到字号最大为止
但是，在最新规范中，small和big标签，不能被提倡使用，提倡使用style="font-size:11px;"CSS样式替代
eg:
<small><small>我被small缩小了</small></small><br />
<big>我被big放大了</big>
4、img 图片标签
①scr属性：表示图片引用路径；
>>>scr的常见路径的写法：
a.相对路径
◀当图片在当前文件下一层时，文件夹名、图片名img/abc.jpg
◀当图片与当前文件同一层时，图片名src="abc.jpg"
◀当图片在当前文件上一层时，../图片名src="../computer.jpg
使用相对路径时，图片最外层只能放到网站根目录（图片必须要在项目文件夹中）
b.绝对路径(了解)
c.网络连接（了解）：直接使用图片的网络地址，
但是由于图片在别人服务器，不可控，所以不建议使用
②title：图片的标题，挡鼠标指上时显示的提示文字
③alt：当图片无法加载时，显示的文字
④width/height：图片的宽度高度，相当于ＣＳＳ中的style="width:;height：；"
⑤align:图片周围的文字，相当于图片的排列方式，可选值：top/center/bottom
eg:
<img src="img/8.jpg" title="当鼠标指上时显示的提示文字" alt="当图片无法加载时，显示的文字" width="100" height="100" align="center" />
5、超链接<a></a>
①href：超链接的跳转地址。可以写网络连接，或本地html文件的相对路径，确定方式同img的src路径。
②target:设置超链接打开的窗口的位置。_self 自身页面打开（默认） _blank 新页面打开
③title:鼠标指上后显示的文字
④rel:表明即将跳转的页面，与当前页面的关系
rel="prev"即将跳转页面，是当前文档的前一篇文章
rel="next"即将跳转页面，是当前文档的后一篇文章
rel="prefetch"预加载，当前文档加载完成后，利用空余网速，预加载即将跳转的页面
[功能链接]
mailto://271399000@qq.com
tencent://message/?uin=271399000
6、锚链接
①本页面锚链接
a.设置一个锚点<a name="top"></a>用name属性表示锚点名称
b.在超链接的href属性中，使用#name 跳转到指定锚点位置
eg：
<a href="#top">跳转到锚点</a>
②其他页面锚链接
a.需要跳转的页面设置锚链接
b.在超链接的href属性，文件名.html#name
注：由于谷歌/IE的兼容问题，需在锚点中，插入一个空格 才能生效
eg：
<a name="top"> </a>
<a href="http://www.Baidu.com" title="鼠标指上后显示的文字" target=" _blank">这是一个百度超链接</a>
<a href="tencent://message/?uin=2713997369" title="鼠标指上后显示的文字" target=" _self">跟我聊聊天吧</a>
<a href="#center" title="鼠标指上后显示的文字" target=" _self">跳 转</a>
<a href="mailto://2713997369@qq.com" title="鼠标指上后显示的文字" target=" _self">跟我发个邮件吧</a>
7、其他标签
①<s>有误文本：删除线
eg：
<s>1.这是s标签中的文字</s>
②cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用
eg：
<cite>2.这是cite标签</cite>
③code：只是表示计算机代码。但是浏览器只会显示等宽字体，不会保留代码格式，需配合pre标签使用
eg:
<pre>
<code>
3.StringBuffer sb = new StringBuffer();
for(String s : arr){
sb.append(s);
}
</code>
</pre>
④bdo：表示文本方向，dir="ltr" 从左往右 dir="rtl" 从右往左
eg：
<bdo dir="ltr">4.1234567</bdo>
⑤kbd:表示需要用户用键盘输入的内容。浏览器显示为等宽字体
eg：
5.请输入“<kbd>Esc</kbd>”退出系统。
⑥sup：上标文本 sub：下标文本
eg：
X<sup>2</sup> X²
<br />
X<sub>2</sub> X²
⑦版权符号 空格
eg：© 7.空格
⑧u:下划线
eg：
<u>8.这是u标签</u>
⑨mark:高亮或标记文本 浏览器显示为黄色背景
eg：
<mark>9.哈哈哈哈哈</mark>
| 四、表格<table> |
一、表格table
表格<table></table>
表格的行<tr></tr>
表格的列<td></td>
th默认加粗，且在单元格居中显示
二、table的常用属性
1.Border：表格的边框属性；当使用border设置边框时会在所有td以及table上嵌套边框，当border加大时，只有table最外层框线加粗，td单元格上的框线不会变化
2.Cellspacing:单元格与单元格之间的间隙，当cellspacing="0"时，
单元格之间的间隙等于0，但边框线并没有合并（边框线还是两条线的宽度）
合并边框的写法:style="border-collapse:collapse;"使用边框合并后，无需设置cellspacing
3.Cellpadding:单元格内边距，单元格中文字与单元格边框之间的距离。
4.Width/Height:表格的宽度，高度
5.Align:表格的对齐方式:left/居左；center/居中；right/居右
*注意：当表格使用align属性时，相当于使表格浮动，可能会导致表格后面的元素受表格浮动影响，导致布局错乱。
6.Bgcolor：背景色
7.Background：背景图片，后接相对路径，当背景图和背景色同时生效时，背景图会覆盖背景色。
8.Bordercolor：边框颜色
style="border-collapse:collapse;"<!--表格中两条线变成一条线-->
三、<tr><td><th>标签属性
>>>当表格属性，与行列属性冲突时，会以行列属性为准
>>>属性设置优先级：td>tr>table
1.Width,Height:给单个的行、列，设置宽度高度；
2.Bgcolor:背景色
3.Align:设置单元格中的文字，在单元格中的水平对齐方式left/center/right
4.Valign:设置单元格中的文字,在单元格中的垂直对齐方式top/center（middle）/bottom
5.nowrap:nowrap="nowrap"设置单元格文字行末不换行
四、表格的跨行与跨列
1.跨列：colspan，某单元格跨N列，则该单元格右边的N-1个td就不需要了
2.跨行：rowspan,某单元格跨N列，则该单元格下边的N-1个td就不需要了
| 五、表单<form> |
1、两个重要属性：
action:表单需要提交的服务器地址
method:表单提交数据使用的方法，get/post
get和post区别：
①get传参使用URL传递，所有的参数在地址栏可见，不安全；get传参数据量有限；
②post传参使用http请求传递，比较安全；post可以传递大量数据
③get请求的传输速率要比post快
>>>URL传参形式：链接URL地址？name1=value1&name2=value2
(地址中的“?”代表传递参数的开始)
2、input的常用属性：
①type:设置input的输入类型
②name:给input输入框起名,一般情况下，name属性必不可少，因为传递数据时，使用name=value(输入内容)的形式传递。
③value:input输入框的默认值
④placeholder:输入框的提示内容.当input有默认的value或者输入值时，placeholder消失。
3.input-type属性的常用属性值：
①text:文本输入框
②password:密码输入框，输入内容默认显示小黑点
③radio:单选框
>>>使用radio/checkbox时，value属性必填，提交时，提交的为value中的默认值
>>>radio/checkbox凭借name属性，确定是否属于同一组，name相同为同组，只能选一个
>>>使用checked="checked"属性，设置默认选中项
④file：文件上传
>>>使用accept="类型"，设置只能上传的文件类型，image/*任意格式图片
⑤sumbit:提交按钮，将所有表单数据，提交至后台服务器
⑥reset:重置表单数据，将表单数据恢复到默认状态
⑦image:图形提交按钮
4.属性名等于属性值的情况：
①checked="checked"设置radio或checkBox时默认选中项
②multiple="multiple" 设置select控件，为多选控件
③selected="selected"设置select控件，默认选项的option选项
④readonly="readonly"设置为textarea只读，不允许编辑。
⑤disabled="disabled"禁止控件。
>>>当input被disabled时，该input的name和value将无法向后台传递。
⑥hidden="hidden"隐藏控件，等效于<input type="hidden"/>
5.下拉选择控件 select
① 写法：
<select>
<option></option> //可以有N多个
</select>
② name属性，应该写在<select>上，所有选项只有一个name
③ multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。
④ option常用属性：
value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；
当option有value属性时，往后台传递的是value属性的值。
title="":鼠标指上后显示的文字。
selected="selected":默认选中。
⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。
6、文本域 textarea
① 写法：<textarea></textarea>
② 设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性，但不常用
③ readonly="readonly" 设置为只读模式，不允许编辑。
④ style="resize: none;" 设置为宽高不允许修改。
⑤ style="overflow: ;" 设置当文字超出区域时，如何处理。
>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
>>> 常用属性值:
hidden：超出区域的文字，隐藏无法显示
scroll：无论文字多少，均会显示滚动
auto:自动，根据文字多少自动决定是否显示滚动条（默认样式）
7、表格的边框与标题
<form>
<fieldset>表格的边框
<legend>联系方式</legend>表格的标题
……N多个表单元素（input/select/texrarea）
</fieldset>
</form>
注：一个边框可以有多组边框+标题
8、HTML5智能表单
①H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签中，即可通过表单提交
<form id="xx">...</form>
<input ...form="xx">
②新增N多个type新属性，详见表格
新增input的属性：
Autocomplete：自动完成功能，
>>>记忆之前输入过的内容，在下次输入时提示没有输入的部分，
>>>大多数浏览器默认开启，
>>>有两个属性值on/off（也是form的属性）
>>>可以在<form>标签上设置Autocomplete，
控制整张表单的自动完成开关。但可以在个别input上单独设置，覆盖form的整体设置
Autofocus：自动获得焦点，Autofocus="Autofocus"刚打开网页时，光标所在位置
Form：所属表单，通过form表单的id，指向特定表单
Required：必填。required="required"设置必填
*Pattern：验证input的模式
Placeholder：提示
今天的内容就分享到这里啦~~~小女子初学HTML，还请各位园友多多指教！！！
出处：http://www.cnblogs.com/hope666/
【HTML入门基础知识】从零开始，我要加油！---致HTML的更多相关文章
- USB入门基础知识（转）
源:USB入门基础知识 相关名词: 主机(Host) 设备(Device) 接口(Interface) 管道(Pipe) 管道是主机与设备端点数据传输的连接通道,代表了主机的数据缓冲区与设备端点之间交 ...
- Linux入门基础知识
注:内容系兄弟连Linux教程(百度传课:史上最牛的Linux视频教程)的学习笔记. Linux入门基础知识 1. Unix和Linux发展历史 二者就像父子关系,当然Unix是老爹.1965年,MI ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- Greenplum入门——基础知识、安装、常用函数
Greenplum入门——基础知识.安装.常用函数 2017年10月08日 22:03:09 在咖啡里溺水的鱼 阅读数:8709 版权声明:本文为博主原创,允许非商业性质转载但请注明原作者和出处 ...
- 1)Linux程序设计入门--基础知识
)Linux程序设计入门--基础知识 Linux下C语言编程基础知识 前言: 这篇文章介绍在LINUX下进行C语言编程所需要的基础知识.在这篇文章当中,我们将 会学到以下内容: 源程序编译 Makef ...
- React入门---基础知识-大纲-1
-----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
- PHP基础入门（二）---入门基础知识必备
前言 在上一章中,我们初步了解了PHP的网页基础和PHP的入门基础,今天继续给大家分享更多有关PHP的知识. 理论知识看起来可能比较枯燥一些,但是我们的实践(敲代码)毕竟离不开它. 只有理论与实践相结 ...
- CodeMix入门基础知识
CodeMix在线订购年终抄底促销!火爆开抢>> CodeMix入门 CodeMix是一个Eclipse插件,可以直接从Eclipse访问VS Code和为Code OSS构建的附加扩展的 ...
- Vue 2.0入门基础知识之全局API
3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...
- [转] linux操作系统下c语言编程入门--基础知识
点击阅读原文 这篇文章介绍在LINUX下进行C语言编程所需要的基础知识.在这篇文章当中,我们将会学到以下内容: 1. 源程序编译 2. Makefile的编写 3. 程序库 ...
随机推荐
- Python subprocess.Popen() error (No such file or directory)
这个错误很容易引起误解,一般人都会认为是命令执行了,但是命令找不到作为参数对应的文件或者目录.其实还有一层含义,就是这个命令找不到,命令找不到,也会报没有这个文件或者目录的错误. 为什么找不到这个命令 ...
- MySQL Backup mydumper
生产环境中有一实例每天使用mysqldump备份时长达到了2个小时53分钟,接近3个小时,还不算上备份文件归档的时间,这个时间对于逻辑备份来说有点久.为了提高逻辑备份效率,打算替换为使用mydumpe ...
- metasploit安装，按官网说明
mkdir -p $HOME/git cd $HOME/git git clone git@github.com:YOUR_USERNAME_FOR_GITHUB/metasploit-framewo ...
- tplink路由器DMZ设置
设置完成后,DMZ主机访问不了? 请排查以下方面: 1.确认服务器搭建成功,即内网可以正常访问: 2.确认在DMZ主机中填写的服务器IP地址正确: 3.宽带直接连接服务器并配置上网,确认外网可以正常访 ...
- ftp权限设置大全！！！
1．登录和对匿名用户的设置write_enable=YES //是否对登录用户开启写权限.属全局性设置.默认NOlocal_enable=YES ...
- iOS项目之苹果审核被拒
解读: 3.2 其他业务模式问题下方列表并非详尽清单,并且您提交的 App 可能会导致我们的政策有所更改或更新,但这里有一些额外的应做事宜和勿做事宜需要您谨记在心: 可以接受 (i)在您的 App 中 ...
- Oracle 11gR2 用户重命名(rename user)
Oracle 11.2.0.2里新增了一个新特性——用户重命名(Rename User),在这个版本之前要想重命名用户,需要按用户导出,再fromuser touser(imp)或remap_sc ...
- activiti5/6 系列之--BpmnModel使用
BpmnModel对象,是activiti动态部署中很重要的一个对象,如果BpmnModel对象不能深入的理解,那可能如果自己需要开发一套流程设计器,使用bpmn-js使用前端或者C/S展现流程流转而 ...
- svn版本备份和恢复注意事项
转帖的,因为我经常要用到,所以也在我的博客上记录一下: 注意:备份不备份日志,你想备份日志就要单独在客户端备了,具体步骤百度上都有 svn备份常用命令1.完全备份和增量备份svn.svnadmin ...
- ipan笔记
// 对于mysql来说, 如果字段没有设置其 default值, 则会自动 设置 default值为null.同理没有设置not null, 则会自动允许null =yes // create ta ...