一、HTML基本标签head部分

HTML文档的基本结构

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

</html>

1、<!DOCTYPE html>文档声明

　　文档类型声明，让浏览器按照HTML5的标准对代码进行解释与执行。

　　文档类型声明必不可少，而且，必须放在文档最上方。

　　如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现BUG。

2、头部：<head></head>

　　head中，主要放一些关于网页设置的相关语句。

　　mete标签

（1）设置网页的字符集编码格式

　　GB2312（简体中文的编码格式）
　　GBK （扩展的国标码。比国标码多了更多的编码格式。）
　　utf-8 (万国码。可以兼容绝大多数国家的语言。)
　　html4.0之前，声明字符集编码格式:

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

（2）设置网页关键字

　　name=“keywords” 表示当前语句用于设置网页关键字
　　content=表示网页的关键字内容，多个关键字之间用英文逗号分开。

eg：

<meta name="keywords"content="杰瑞教育,HTML5,Web开发" />

（3）设置网页描述

　　name="description"表示当前语句用于设置网页描述
　　网页的描述，在搜索引擎中搜索网站时，标题下面的一段文字，就是网页描述的内容。

eg：

<meta name="description"content="这是我开发的第一个网页。"/>

　　<title></title>标签

网页的标题:也就是网页选项卡上的文字

eg：

<title>百度首页</title>

　　<link>标签

链接网页小图标：选项卡上的小图片。
rel属性：选择icon，表示链接的文件，将作为网页的icon图标。
href属性:选择图片所在的路径地址。

eg：

<link rel="icon" href="img/icon.jpg">

二、常见的块级标签

1、HTML的标签分类

分为“块级标签”和“行级标签”
二者区别：
①.块级标签自动换行，前后隔一行.
　行级标签不会自动换行，从左向右依次显示.
②.块级标签默认的宽带是100%.
　行级标签的宽带由文字内容撑开.
③.块级标签可以设置宽度、高度、边距等属性.
　行级标签不能设置上述属性.

从写法上，html标签分为“成对标签”和“自闭合标签(空标签)”
1.成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。
例如：<h1></h1> <p></p> <title><title>
2.自闭合标签/空标签：只有一个标签，用/表示标签的自动闭合（/可以省略）。
例如<hr/><link/><meta/>

①标题标签（默认加粗，h1最大，h6最小）

<h1>一级标题</h1>

<h2>一级标题</h2>

<h3>一级标题</h3>

<h4>一级标题</h4>

<h5>一级标题</h5>

<h6>一级标题</h6>

②水平线<hr/>
③段落<p><p/>
④换行<br />
eg：

<p>这是一个段落。这是一个段落。<br>这是一个段落。这是一个段落。</p>

⑤引用<blockquote></blockquote>

blockquote :引用标签。表示标签中的文字是引用自其他网站的内容。
　　　　　浏览器默认显示效果，整段向后缩进。

cite属性，表明引用的来源，一般为引用的网址URL
eg：

<blockquote cite="www.jredu100.com">引用：你好帅哥！</blockquote>

⑥预格式标签：<pre></pre>

与p标签不同的是，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>

⑨定义描述列表

定义列表包含两部分：
<dt></dt>:定义列表的标题，标题定格显示，一般一个定义列表只有一个标题。
<dd></dd>:定义列表的描述项，相对于标题向后缩进显示，一个列表可以有多个描述项。

<dl>
<dt>标题</dt>
<dd>描述项</dd>
</dl>

一般情况下，标题dt只有一项，描述项dd可以有N多项。
浏览器显示时，标题格式会显示，显示缩进。
eg：

<dl>

    <dt>定义列表的标题</dt>

    <dd>定义列表的描述项1</dd>

    <dd>定义列表的描述项2</dd>

    <dd>定义列表的描述项3</dd>

</dl>

⑩图片组合标签figure

包含两个部分：img 一张图片
figcaption：图片的标题，在图片的下方显示。

 <figure>

     <img src="img/3.jpg" />

     <figcaption>这是图片的标题。</figcaption>

 </figure>

（11）分区标签div
用于配合css使用，将网页划分为区块，可以包裹各种标签。
eg：

 <div style="width:100%; height:100px; ">

     <h1>我是div里面的标题</h1>

     这是div里面的文字。

 </div>

三、常见的行级标签

 

常见的行级标签

span（文本）、img（图片）、em（强调）、strong（强调）、q（短引用）、a（超链接）、
i（倾斜）、b（加粗）、small（缩小字体）

1、span（文本）：用于包裹行内的文字，常配合css使用修改文字样式。

<span style="color: red;font-size: 40px;">真帅！</span>巅峰时代

2、倾斜/加粗
em：显示倾斜
strong：显示加粗
i：倾斜
b：加粗

em  strong  i  b区别

①em和i都能倾斜，strong和b都能加粗，但是strong和em多了一层强调的语义。可以帮助收索引擎快速抓取网站重点,而且HTML5要求开发者尽可能实现代码的语义化。
②em和strong都表示强调，而strong得强调程度要大于em，em和strong标签均可多成嵌套，表示强调程度的递增
eg：

<em>em标签，</em>

<strong>strong标签</strong>

<i>i标签</i>

<b>b标签</b>

<u>u标签</u>

3、常见引用标签

blockquote、q、cite

区别：
显示效果上：blockquote整段缩进、q加引号、cite倾斜

从功能上：blockquote用于引用一整段内容，是块级标签。

q用于引用一句话是行级标签。cite常用于引用书画作品名。

eg：

<blockquote>块引用</blockquote>

<q cite="www.jredu100.com">q标签，短引用</q>

<cite>cite引用</cite>

small（缩小字体）：small标签可以多层嵌套，表示字体小一号
直到字号小到最小号为止
big（放大字体）：同small可以多层嵌套，直到字号最大为止

但是，在最新规范中，small和big标签，不能被提倡使用，提倡使用style="font-size:11px;"CSS样式替代
eg：

<small>小一号字体</small>

<big>大一号字体</big>

4、img 图片标签

（1）src属性表示图片所在的路径。
　　[路径的表示方式]
　　①网络图片地址。并不建议使用。
　　②可以使用图片的绝对路径。但是严禁使用绝对路径。（因为，绝对路径使用file：//协议，网页使用http：//协议，无法访问file：//协议的文件。）
　　　　　　file：///C:sunyang.jpg 绝对路径的写法：file：///盘符：/文件路径
　　③使用相对路径。推荐使用的唯一方式。
　　　　　　a.图片在当前文件的下一层，“文件夹名/图片名”
　　　　　　b.图片与当前文件夹在同一层，直接写“图片名”。
　　　　　　c.图片在当前文件的上一层，“../图片名”。
　　　　注意：图片必须包含在项目里面，不能推出当前项目根目录。
（2）width、height 宽度和高度属性
（3）title:鼠标指上时显示的文字
（4）alt：图片无法加载时显示的文字。省略alt，将默认显示title内容
（5）align：图片周围的文字，相对于图片的排列方式；
　　top文字居上 center居中 bottom文字居底

eg：

<img src="img/icon.jpg" width="100"height="100" title="鼠标指上时显示"alt="图片无法加载"align="bottom"/>

5、超链接<a></a>

（1）1.href属性：找链接跳转的地址。可以是网络连接，也可以是本地html相对路径。
（2）target属性：超链接新页面打开位置。
　　_slef在当前页面打开（默认）_blank在新页面打开
（3）title属性：鼠标指在超链接上显示的文字。

6、功能链接

（1）malito：给指定邮箱发送邮件。

<a href="malito://931497747@qq.com"target="_self"title="1230">超链接</a>

（2）tencent:与指定qq聊天

<a href="tencent://message/?uin=1677246256"target="_self"title="1230">聊天</a>

（3）锚链接：点击超链接，可以跳转页面的指定位置(锚点)
①在页面的指定位置，定义一个锚点：

<a name="top"></a>

　　②将超链接的href属性改为“#锚点名称”

<a herf="#top">调到div上方</a>

　　③跳转到其他页面的锚点方式：跳转网页位置#锚点名称

7、其他标签（了解）
　　①<s>：删除线
eg：

<s>这是s标签中的文字</s>

　　②code：只是表示计算机代码。只会显示等宽字体，不会保留代码格式，需配合pre标签使用

eg：

<pre>

<code>

 jsLoader({name : 'iplookup',url :'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'});

</code>

</pre>

　　③bdo：表示文本方向，dir="ltr" 从左往右 dir="rtl" 从右往左
eg：

<bdo dir="rtl">姜浩真帅</bdo>

　　④kbd:表示需要用户用输入的内容。
eg：

请输入“<kbd>Esc</kbd>”退出系统。

　　⑤sup：上标文本 sub：下标文本
eg：

H<sub>2</sub>O   X<sup>2</sup>

　　⑥var：表示变量
eg：

<var>x</var>+<var>y</var>=1

　　⑦u:下划线
eg：

<u>这是u标签</u>

　　⑧mark:高亮或标记文本 浏览器显示为黄色背景
eg：

<mark>哈哈哈哈哈</mark>

四、表格<table>

一、表格table

表格中一行，用tr表示；
一行中的每个单元格，用td表示；
首行的表头中每个单元格，用th表示，th默认文字会加粗、居中。

二、表格中的各种属性

1.border：给表格的每个td和整个table加边框。如果boder的值>1，则只有最外层的加粗，tb的边框不变。
border: hidden：隐藏边框。

2.cellspacing：设置单元格与单元格之间的间距。
cellspacing="0"可以设置边框之间的间距为0，但是相邻的边框不会合并，而且显示为两条线的宽度。

设置表格边框合并
可以使用css设置：style="border-collapse: collapse;
设置边框合并以后，cellspacing属性将会消失。

3.cellpadding：单元格内边距，单元格中文字与边框之间的距离。

4.width/height：宽度和高度。0

5.align：设置表格在浏览器中，居左 居右。

6.bgcolor：表格的背景颜色

bordercolor：表格的边框颜色
   background：表格背景图。优先级高于背景色。

三、表格的行列属性

作用于tr或者td的属性：

1.width 宽度、height 高度
2.bgcolor：背景色
当表格的属性与行列的属性发生冲突时，优先级采用 近者优先 的原则：table<tr<td。
3.align：设置单元格中的文字，水平对齐方式；left center right
 valign：设置单元格中的文字，垂直对齐方式；top center bottom

四、表格的跨行与跨列

跨列：colspan="n"如果某个单元格n列，则单元格右侧n-1个td就不需要了。
跨行：rowspan="n"如果某个单元格行，则单元格下方n-1个td就不需要了。

表格结构化

完整的表格结构，包括：
caption：表格的标题，无论<caption>标签放在表格第几行，表格标题永远在表格正上方居中。
thead：表格的表头部分。永远在表格最上部。
tbody：表格的身体部分。在thead之下，tfoot上。
tfoot：表格的尾部永远在最下部。

表格的直列化

表格有记列，就可以在表格的最上方写几个<col/>标签，每个<col/>就对应这第几列，可以<col/>标签修改样式、添加name等属性，表示这一列的所有
tb同步修改;如果，需要对多列修改同样式，可以使用<colgroup><colgroup/>标签包裹多个<col/>.

五、form表单

1、form表单两个重要属性

action：表示，将表单提交给哪个服务器地址；
method：表单提交数据的方式，可选值get和post两种。
get和post区别
① get使用URL传递数据。所有内容在地址栏可以看见，不安全。
post的数据无法在地址栏看到，比较安全。
② get传递的数据量有限，而且只能传递纯文字内容；
post可以传递大量数据，而且可以传递图片、视频等文件。
③ get的传输速度比post快。
get传递数据的URL格式
http：//原来的地址。html?name1=value1&name2=value2
比如:http：//127.0.0.0：8020/0595.html?username=123
所以，input使用时，name属性必不可少。缺少name，将导致该输入框的数据比向后台传递。

2、input的常用属性

① type：表示当前输入框是何种类型的输入框。
② name：给输入框起别名。向后台传递时，使用name=value的形式传递。
③ value：当前input的默认值。
④ placholder：输入框的提示内容。当输入框有value时，提示内容消息。
⑤ hidden：隐藏当前输入框。可以写为hidden="hidden"，也可以省略属性值，只写<inout type="text" hidden/>
隐藏的输入框内容依然可以向后台传递。（border: hidden 隐藏边框）
⑥ disabled：禁用当前输入框。可以显示，不能使用。
被禁用的输入框内容，将不能向后台传递数据。
⑦ checked：设置默认选中的选项，可以写为checked="checked",也可以省略属性值，只写<inout type="text" checked/>

3、input的type类型

① text：普通的文本框。
② password：密码框，输入的内容，显示为小黑点。
③ radio：单选按钮。单选按钮的value不能省略，这个value需要传递到后台
单选按钮，凭借name是否相同，区分按钮是否为一组，name必须相同。
checked="checked"设置单选按钮，默认被选中。
④ checkbox：多选按钮。其他与单选按钮一样。
⑤ file：文件上传框。
acceot属性，可以限制只能上传何种类型的文件。“*”表示可以接受所有文件，"image/*"表示只能接受图片。
multiple="multiple",设置可以上传多个图片。
⑥ submit：表单提交按钮。
⑦ reset：表示重置按钮，点击将表单回复为初始状态。
⑧ image：图形提交按钮。src属性导入图片，与submit都聚有提交表单的作用。
⑨ button：显示为按钮形状，但是没有任何作用。
⑩ hidden：隐藏的输入框。与普通的输入框+hidden="hidden"的作用相同。

4.select 下拉选择区块

① select 里面的每一项，<option></option>标签表示。
② name属性，需要写到select标签上。
③ option标签如果有value属性，则向后台传递的将是value属性的值，如果没有value属性，则传递的是<option></option>标签之间的文字。
④ option 添加属性selected="selected",设置默认选中项。
⑤ select添加属性multiple="multiple",设置当前下拉控件可以多选。
⑥ option 添加属性title，表示鼠标指上后显示的文字。
⑦ select 可以使用<optgrop></optgrop>标签对选项进行分组，用label属性显示分组名。

5.textarea 文本域

① 文本域大小控制
可以用文本域属性cols="20"（宽度多少字符)rows="10"(高多少行)可以使用css样式style="width="100px"; height="100px";
可以使用css样式
style="width="100px"; height="100px";
②设置文本域大小不能拖动。
style="resize:none"
③ 文字超出区域处理：
使用style="overflow:xx;"可以显示文字超出区域的显示的方式：
overflow:hidden；超出区域的文字隐藏不显示
overflow:scroll；无论文字多少，都会显示水平垂直滚动条。
overflow:auto；自动，默认效果，文字多显示滚动条，文字少不显示滚动条。
可以使用overflow-x和overflow-y单独修改两个方向的滚动条
overflow-x:scroll;overflow-y:hidden;

【HTML5智能表单】

1.H5给我们提供了将form外的input与表单的关联方式。只需给form表单起一个id，然后给表单外面的input添加form属性，指向这个id 就可以实现表单与input的绑定；
<form id="ff"></form>
input form="ff"/>
2.H5新增了很多input的新的type类型。
range color date email url
3.H5新增的input属性：
① form属性：关联指定表单的id
② placeholder：输入框的提示内容
③ required="required":必填。
④ autofocus="autofocus"：指定输入框自动获得焦点。
⑤ autocomplete：是否开启自动提示完成功能，默认为开启状态，设置为off表示关闭，设置为on表示打开。
可以给form标签设置autocomplete，控制表单所有输入框的自动提示功能。

 

HTML的基本标签及语法的更多相关文章

  1. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  2. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一.dl dt dd认识 ...

  3. Freemaker FTL指令常用标签及语法

    https://blog.csdn.net/pengpengpeng85/article/details/52070602 FTL指令常用标签及语法 注意:使用freemaker,要求所有标签必须闭合 ...

  4. Html介绍,标签的语法

    1.标签由英文"<"和">"括起来组成,如<html>就是一个标签2.html中的标签一般都是成对成对出现的,分为开始标签和结束标签.结 ...

  5. FTL指令常用标签及语法

    FTL指令常用标签及语法注意:使用freemaker,要求所有标签必须闭合,否则会导致freemaker无法解析. freemaker注释:<#-- 注释内容 -->格式部分,不会输出 - ...

  6. HTML基本标签及语法

    HTML简介 什么是HTML 本文素材来源于黑马程序员Pink老师 HTML 指的是超文本标记语言(Hyper Text Markup Language) ,它是用来描述网页的一种语言. HTML 不 ...

  7. 【SQLSERVER】处理一对多标签的语法糖

    数据库表设计的时候,经常会出现一对多的情况,比如标签.明细之类的. 有时,需要在一个查询中,将每个主体的所有标签在一个字段中展示出来,这个时候就可以用 FOR XML PATH 这个语法轻易的实现. ...

  8. 【黑马pink老师的H5/CSS课程】（二）标签与语法

    视频链接:P8~P29 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动 参考链接: HTML 元素 1.HTML语法规范 1.1 基本语法概述 HTML 标签是由尖 ...

  9. 【HTML】学习路径1-网页基本结构-标签基本语法

    本系列将学习最基础的web前端知识: HTML---CSS---JavaScripts---jQuery 四大部分学习完以后再进入到JavaWeb的知识.(后端) 然后再学习SpringBoot技术. ...

  10. PHPCMS标签:PC标签模板语法规则

    模板语法规则1.变量表示{$name} 被解析成 <?=$name?>,表示显示变量$name的值,其中的“name”由英文字母.数字和下划线组成首字母必须是英文字母或者下划线. 2.常量 ...

随机推荐

  1. 自己动手封装一个url参数解释器( ghostWuUrlParser.js )

    ghostWuUrlParser.js的作用是分析一段url中的查询参数,即: '?'号后面的 键值对参数. ghostWuUrlParser.js 使用说明: ghostWuUrlParser( ' ...

  2. Head First 设计模式 第5章 单例模式

    第5章 单例模式 1.定义:确保一个类只有一个实例,并为其创建访问点. 2.单例模式的类图: 对应的单例模式的代码: package com.ek.singleton; /** * @包名 com.e ...

  3. Node.js原生及Express方法实现注册登录原理

    由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...

  4. 利用GeoIP数据库及API进行地理定位查询 Java

    地理定位查询的的数据库比较多,而且大多都开放一些free的版本 国内的有纯真数据库等,但是他只提供文本的地理位置信息,不提供经纬度数据 当应用到google map时,就不可以了 国外的有MaxMin ...

  5. netstat命令---输出网络相关的信息

    简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Member ...

  6. SpringBoot构建RESTful service完成Get和Post

    一个基本的RESTfule service最进场向外提供的请求Method就是Get和Post. 在Get中,常用的都会在请求上带上参数,或者是路径参数.响应Json. 在Post中,常用的会提交fo ...

  7. 关于JS中涉及的常用类型转换及运算符表达式

    JS中的常用类型转换(一般用强制转换):1.强制转为整数:parseInt:写法:x = parseInt(x); 2.强制转换位小为:parseFloat:写法:x = parseFloat(x); ...

  8. 使用Jetty运行Java Web项目（Maven）

    目前流行的两款IDE: Eclipse和IntelliJ IDEA 2. IntelliJ IDEA

  9. python 如何在一个for循环中遍历两个列表

    是我在看<笨方法学python>过程中发现有一行代码看不懂--" for sentence in snippet, phrase:",所以研究了半天,感觉挺有收获的.所 ...

  10. java中方法传值小知识解析

    1.java语言参数之间只有值传递,包括按值调用和按引用调用. 一个方法可以修改传递引用所对应的变量值,而不能修改传递值调用所对应的变量值. 按值调用:包括八大基本数据类型都是按值调用.传值的时候,也 ...