前言:
今天来和大家分享一下近期自己整理的HTML笔记,希望会对你的学习有所帮助!
***本章关键词:HTML头部格式;常见的块级标签;常见的行级标签;表格;表单。
一、HTML头部格式 |
一、HTML文档结构
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 </body>
9 </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:
1 <!--声明文件的编码格式-->
2 <meta charset="utf-8" >
3
4 <!--作者-->
5 <meta name="anthor" content="http://www.CC.com"/>
6
7 <!--网页关键字:多个关键字用英文逗号分隔-->
8 <meta name="keywords" content="html5,网页,Web前端开发"/>
9
10 <!--网页描述:搜索网站时,title下面的解释文字。至关重要!!-->
11 <meta name="discription" content="这是我开发的第一个网页"/>
12
13 <!--title标签:网页的标题,即网页选项卡上的文字-->
14 <title>我的第一个网页</title>
4、link标签
①作用:用于为网页链接各种文件(例如:链接网页图标(title前的小logo))
②常用属性:
rel:用于表明被连接文件与当前文件的关系。
此处选icon,表明被连接图片是当前网页的icon图标。
type:表明被连接文件是什么类型,可以省略
href:表明链接文件的地址
eg:
<link rel="icon" type="image/x-icon" href="图标路径"/>
二、常见的块级标签 |
1、HTML的标签分类
①块级标签:自动换行、前后隔一行
②行级标签:按行逐一显示
2、常见的块级标签
①标题标签
1 <h1>一级标题</h1>
2 <h2>一级标题</h2>
3 <h3>一级标题</h3>
4 <h4>一级标题</h4>
5 <h5>一级标题</h5>
6 <h6>一级标题</h6>
②水平线<hr/>
③段落<p><p/>
④换行<br />
eg:
1 <p>这是P标签中的一个段落,这是P标签中的一个段落,这是P标签中的一个段落</p>
2 <p>这是P标签中的一个段落,这是P标签中的一个段落<br/>这是P标签中的一个段落</p>
⑤引用<blockquote></blockquote>
表明标签中的文字,为引用的内容,浏览器显示为段落缩紧
cite属性,表明引用的来源,一般为引用的网址URL
eg:
1 <blockquote cite="http://www.jredu100.com">
2 我是引用的WWW。。吼吼吼哈哈哈哈哈哈哈
3 </blockquote>
⑥预格式标签:<pre></pre>(一般来承载代码,格式!)
浏览器(默认显示样式)解析时:
①显示为等宽字体
②代码中的换行,空格等元素可在浏览器中直接显示。
1 <pre>
2 一二三四五
3 一二三四五
4 </pre>
⑦有序列表ol (order list)
1 <ol>
2 <li>列表第一项</li>
3 <li>列表第二项</li>
4 <li>列表第三项</li>
5 <li>列表第四项</li>
6 </ol>
⑧无序列表ul (unorder list)
1 <ul>
2 <li>列表第一项</li>
3 <li>列表第二项</li>
4 <li>列表第三项</li>
5 <li>列表第四项</li>
6 </ul>
⑨定义描述列表
<dl>
<dt>标题</dt>
<dd>描述项</dd>
</dl>
一般情况下,标题dt只有一项,描述项dd可以有N多项。
浏览器显示时,标题格式会显示,显示缩进。
eg:
1 <dl>
2 <dt>这是dl列表的标题</dt>
3 <dd>描述项1</dd>
4 <dd>描述项2</dd>
5 <dd>描述项3</dd>
6 <dd>描述项4</dd>
7 </dl>
⑩图片组合标签figure
①<figure>标签有两个子标签;
②浏览器显示为
1 <figure>
2 <img src="img/3.jpg" />
3 <figcaption>这是图片的标题。</figcaption>
4 </figure>
(11)分区标签div
常配合CSS使用,为网页中的最常用的分区标签,常用于网页布局使用
eg:
1 <div style="width:100%; height:100px; background-color:red;">
2 <h1>我是div里面的标题</h1>
3 这是div里面的文字。
4 </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:
1 <em>我被em标签强调了!!</em><br />
2 <strong>我被strong标签强调了!!</strong><br />
3 <i>我被i标签倾斜了!!</i><br />
4 <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:
1 <small><small>我被small缩小了</small></small><br />
2 <big>我被big放大了</big>
4、img 图片标签
①scr属性:表示图片引用路径;
>>>scr的常见路径的写法:
a.相对路径
◀当图片在当前文件下一层时,文件夹名、图片名img/abc.jpg
◀当图片与当前文件同一层时,图片名src="abc.jpg"
◀当图片在当前文件上一层时,../图片名src="../computer.jpg
使用相对路径时,图片最外层只能放到网站根目录(图片必须要在项目文件夹中)
b.绝对路径(了解)
c.网络连接(了解):直接使用图片的网络地址,
但是由于图片在别人服务器,不可控,所以不建议使用
②title:图片的标题,挡鼠标指上时显示的提示文字
③alt:当图片无法加载时,显示的文字
④width/height:图片的宽度高度,相当于CSS中的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:
1 <a name="top"> </a>
2 <a href="http://www.Baidu.com" title="鼠标指上后显示的文字" target=" _blank">这是一个百度超链接</a>
3 <a href="tencent://message/?uin=2713997369" title="鼠标指上后显示的文字" target=" _self">跟我聊聊天吧</a>
4 <a href="#center" title="鼠标指上后显示的文字" target=" _self">跳 转</a>
5 <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:
1 <pre>
2 <code>
3 3.StringBuffer sb = new StringBuffer();
4 for(String s : arr){
5 sb.append(s);
6 }
7 </code>
8 </pre>
④bdo:表示文本方向,dir="ltr" 从左往右 dir="rtl" 从右往左
eg:
<bdo dir="ltr">4.1234567</bdo>
⑤kbd:表示需要用户用键盘输入的内容。浏览器显示为等宽字体
eg:
5.请输入“<kbd>Esc</kbd>”退出系统。
⑥sup:上标文本 sub:下标文本
eg:
1 X<sup>2</sup> X²
2 <br />
3 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
① 写法:
1 <select>
2 <option></option> //可以有N多个
3 </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、表格的边框与标题
1 <form>
2 <fieldset>表格的边框
3 <legend>联系方式</legend>表格的标题
4 ……N多个表单元素(input/select/texrarea)
5 </fieldset>
6 </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/