【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">&nbsp;</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">跳&nbsp;转</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. 程序库 ...

随机推荐

解决xp突然出现开机登录界面的问题
对系统进行网络相关的设置后,有时会让系统开启时突然冒出登录窗口,即使我们没有对自己的系统设置开机密码,也会冒出这个,需要回车一下才会进入系统:关机时,xp特有的“关机”,“待机”,“重新启动”按钮会变 ...
ubuntu常用软件命令
解压zip软件 unzip xxx.zip -d解压到指定目录清理磁盘空间 sudo apt-get autoremove sudo apt-get clean sudo dpkg --list ...
navicat for mysql 数据库备份与还原
一, 首先设置, 备份保存路径工具 -> 选项点开其他 -> 日志文件保存路径二. 开始备份备份分两种, 一种是以sql保存, 一种是保存为备份 SQL保存右键点击你要备份的数 ...
linux----------安装Supervisor是用Python开发的一套通用的进程管理程序
1.linux环境必须安装 python 2.yum install python-setuptools 3.获取supervisor包 wget https://pypi.python.org/pa ...
Java 中的E，K，V，T，U，S
Java泛型中的标记符含义: E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类) K - Key(键) V - Value(值) N - Number ...
Hdu1241 Oil Deposits (DFS)
Problem Description The GeoSurvComp geologic survey company is responsible for detecting underground ...
hdu4916 Count on the path
调了好久.... •把树视为以1为根的有向树,然后将1删除 •原树变为一个森林,并且任一棵树的根节点均为原树中1的子节点 •只需要考虑最小编号前3小的三棵树 •记f[x][y]为去掉x和y两棵树后的最 ...
Shell 常用技巧
Shell 常用技巧 echo $RANDOM | cksum | cut -c - openssl rand -base64 | cksum | cut -c - date +%N | cut -c ...
【题解】JSOIWC2019 Round4
题面: https://files-cdn.cnblogs.com/files/yzhang-rp-inf/P13.gif https://files-cdn.cnblogs.com/files/yz ...
算法（第四版）C# 习题题解——1.1
写在前面整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 善用 Ctrl + F 查找题 ...

【HTML入门基础知识】从零开始，我要加油！---致HTML

get和post区别：

【HTML入门基础知识】从零开始，我要加油！---致HTML的更多相关文章

随机推荐

热门专题