H5取经之路——HTML的基本标签
一、head中的基本标签
1、HTML文档的结构：
<!--使用link标签，链接网页图标（title前的小logo）
rel属性：声明连接文件的类型，此处选icon
type属性：可以省略
href属性：表示图片的路径地址
-->
<link rel="icon" type="image/x-icon" href="img/icon.png" />
4、Title标签：
<!--title标签：网页的标题，即网页选项卡上的文字。-->
<title>我的第一个网页</title>
5、meta标签：
meta标签常用属性：
1、charset：设置文档的字符集编码格式···属性名=“”
HTML5中设置字符集编码<meta charset="UTF-8">
>>>常见的字符集编码格式：
a.GB2312:国标码，即简体中文
b.GBK：扩展的国标码
c.UTF-8：万国码Unicode 常用 2、http-equiv:将我们的信息写给浏览器看，让浏览器按照此要求执行，
可选属性值：content-type（文档类型）、refresh（网页定时刷新）、
set-cookie（设置浏览器cookie缓存），需要配合content属性使用。
（http-equiv属性只是表明需要设置那一部分，具体设置与否，放到content
属性中） 3、name属性：使用方法同“http-equiv”，将我们的信息写给搜索引擎看。
常用且需要掌握的属性值：author（作者）、keywords(网页关键词)、description(描述)，
这两个属性设置，网页必不可少
例如：
-->
<!--作者-->
<meta name="author" content="http://www.jredu100.com" />
<!--网页关键词-->
<!--关键词之间用英文逗号隔开-->
<meta name="keywords" content="关键词1,关键词2" />
<!--网页描述-->
<meta name="description" content="杰瑞教育很好" />
<meta charset="UTF-8"/>
二、常见的块级标签：
1、h标签：标题标签，自动加粗，h1最大，h6最小
<h1></h1>,<h2></h2>,......<h6></h6>
2、水平线标签：<hr />
3、 段落标签：<p>.....</p>
4、 换行标签：<br />
(判断块级标签与行级标签：另写，看是否隔一行)
5、引用标签：有cite属性，一般表明引用网址，浏览器默认首行缩进
<blockquote cite="http://www.baidu.com">
白日依山 尽，黄河入海流
</blockquote>
6、预格式标签：<pre></pre> （不常用）
浏览器默认显示样式：1、显示为等宽字体，2、代码中的换行、空格等元素可在浏览器中直接显示
三、基于布局的块级标签
列表项：<li>可以有多个</li>
2、无序列表：<ul></ul>
列表项：<li>可以有多个</li>
3、定义描述列表：<dl></dl>
列表标题：<dt>一般只有一项</dt>
列表描述项：<dd>可以有多项</dd>
注意：嵌套时，HTML标签一定不能交叉
4、组合标签：<figure></figure>用于显示图片及图片标题
两个子标签：<img /> 图片
<figcaption></figcaption>
显示效果：图片下面一个标题，同时图片和标题前带缩进
<figure>
<img src="../img/icon.png" />
<figcaption>这是图片标题</figcaption>
</figure>
5、分区标签：<div></div>
四、常见的行级标签
1、span（文本）：无实际意义，用于包裹某部分，修改特定样式
2、【strong、em、i、b标签的区别】
a、Strong和em都表示强调，strong显示为粗体，em显示为斜体，而且strong程度高
b、strong和b都能加粗，i和em都能倾斜，strong和em多了一层强调的语义。
HTML5语言，要求标签尽可能的实现语义化，即看到strong，它不止加粗，还有强调的含义。
3、q（短引用）：显示为文字用“”引起来。cite属性
4、small（缩小字体）,big(增大字体)，可多层嵌套，直到达到上下限，不常用
5、a（超链接）
a、href:超链接的路径,可以是网络连接，也可以是网络文件（路径确定同img）
b、target:超链接打开的位置。_self 自身页面（默认） _blank 新页面
c、title：鼠标指上后显示的文字
d、*（了解）rel用于表明被链接文档与当前文档的关系：
rel="prev"代表前一篇，rel="next"代表后一篇
rel="icon"代表被连接图片是当前文档的图标
rel="stylesheet"代表被链接文档是当前文档的样式表
rel="prefetch"预加载在当前文档加载完成后利用空余时间预加载即将连接的文档
浏览器不会以任何方式使用该属性，但搜索引擎可以利用该属性获得更多相关连接的信息
e、锚链接（即跳转）：
五、表格：
①、
table：
表格的行 tr 每行中的列 td
表格的表头：<th></th>,默认加粗，单元格居中
【常用属性】
、border：给表格添加边框。当border属性增大时，只有外围框线增加，单元格的边框始终为1px
、Cellspacing:单元格之间的间隙,当callspacing=""时，只会使单元格间隙为0，不会合并边框线
【表格边框合并】style="border-collapse: collapse;"，无需再写callspacing=""
、cellpadding:每个单元格的内容与边框之间的距离
、height/width:宽高
、align:表哥在屏幕的左中右位置显示 left center right
>>>注意1、给表哥加上align属性，相当于让表格浮动，会直接影响表格后面元素的原有排列方式
、若要在table中修改文字，用样式 style="text-align:top/center/bottom;"
、bgcolor:背景色，等同于style="background-color:;"
、background:背景图片，等同于style="background-image:;"，且背景图会覆盖背景色
、bordercolor:边框颜色
②、
【tr和td相关的属性】
、width/height：单元格的宽高
、bgcolor:单元格的背景色
、align：left center right 单元格中的文字，水平对齐方式
、valign:top center bottom 单元格中的文字，垂直对齐方式
、nowrap:单元格中文字不换行
、background:背景图片 注意：.当表格属性与行列属性冲突时，以行列属性为准
.表格的align属性，是控制表格在浏览器中的显示位置
行和列的align属性，是控制单元格中文字在单元格中的对齐方式
、表格的align属性，并不响单元格内，文字的对齐方式
tr的align属性，可以控制一行中所有单元格的水平对齐方式
③、
表格的跨行与跨列： ·····td
colspan 跨N列，当某个格跨n列时，其右边n-1个单元格需删除
rowspan 跨N行，当某个格跨n行时，其下边n-1个单元格需删除
④、
表格的结构化
完整表格结构：thead tbody tfoot
无论各部分在表格什么位置，显示时，caption均在表格外最上方
thead会在表内最上方
tfoot会在表内最下方
⑤、
表格的直列化
<colgroup class="name"> 前两个为一组
<col style="background-color: red;" /> 第一列
<col style="background-color: green;" /> 第二列
</colgroup>
<col style="background-color: blue;" /> 第三列
六、表单
form：表单
1、两个重要属性：action-表单提交的服务器地址 method-表单提交数据的方法（get/post）
2、get和post的区别：
①get：使用URL传参：http://服务器地址?name1=value1&name2=value2(?表示传递参数，
?后面采用name=value的形式传递，多个参数间，用&连接)
so，URL传参不安全，所有信息可在地址栏看到，并且可以通过地址栏随意传递其他数据
URL传递数据量有限，只能传递少量数据
②post：使用http请求传递数据，URL地址栏不可见，比较安全，且数据量没有限制
综上：常用post（get速度快）
3、【input常用属性】 PS：input只能单行输入
①type：表示input输入框的类型
②name:input输入框的别名。一般情况下，必填，因为数据传输时使用name=value形式传送
③value：input输入框的默认值
④placeholder:input的提示内容，当输入框有value时，提示内容消失
⑤tabindex：控制点击tab时的跳转顺序，由TabIndex数值小往数值大跳转
⑥size：直接改框的大小
【input特殊属性】
①checked="checked"默认选中
②disabled="disabled"设置控制不能使用，用在按钮上不能点击，用在输入框上不能修改
而且，如果输入框disabled，则输入框信息不能往后传递
③hiden="hidden"隐藏。等同于<input type="hidden" name="username" value=1234/>
常配合disabled，或根据其他需要，使用隐藏域传递数据
4、【input-type属性详解】
①text：文本输入框
②password：密码输入框
③radio:单选按钮，
checkbox复选按钮
>>>name和value属性需同时存在，提交时提交的是value中的属性值
例如：<input type="radio" name="sex"value="男" />提交时，显示“sex=男”
>>>radio凭借name属性区分是否为同一组，name相同为同组，同组中只能选一个
>>>checked="checked"默认选中。（radio只能选一个，checkbox可以选多个）
④file：文件上传按钮
⑤submit：提交按钮，提交表单数据
⑥reset：重置按钮，将表单数据重置为初始状态
⑦image：图形提交按钮，功能同submit，可以提交数据
⑧button：普通按钮，没有任何功能
5、【下拉框控件 select】 （是另一标签，不在input中）
①写法：<select name="city">
<option>青岛</option>
</select>
②name属性，应该写在<select>上，所有选项只有一个name
③multiple：设置select控件为多选，可在界面使用Ctrl+鼠标进行多选，一般不用
④option常用属性：
value="":当option没有value属性时，往后台传的是option标签中的文字
当option有value属性时，往后台传的是value中的值
title：鼠标指上后显示的文字。
selected=“selected”:默认选中。可修改为多选控件（也可单选）
⑤ <optgroup label="北京市">
<option>东城区</option>
<option>朝阳区</option>
</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、表单边框与标题
<fieldset>
<legend>表单标题</legend>
</fieldset>
>>>如果想要标题嵌入到边框中，需将标题标签写到边框标签里面
>>>一个表单，可以有多组边框+标题的组合
8、【H5智能表单】
① H5新增iuput的form属性，用于指向特定form表单的ID，实现input无需放在form标签，
即可通过表单进行提交
<input type="text" name="text" form="form1" />
<form action="T9.html" method="get" id="form1">
② type新增属性：见表格
③ input元素的新增属性：
Autocomplete：自动完成功能：记录用户之前输入的内容，并在下此次输入时自动提示完成输入
>>>（input和form能用,分别完成对特定输入框和整张表单进行修改）
>>>属性值：on/off
>>>绝大部分浏览器默认开启
Autofocus：自动获得焦点：autofocus="autofocus"只能获得一个焦点
Form：所属表单：见①
Required：必填 required="required"设置input必填，否则组织提交
Pattern：验证input的模式 正则表达式
Placeholder：提示 提示内容
H5取经之路——HTML的基本标签的更多相关文章
- H5取经之路——添加hover实现特定效果
一.鼠标指上后显示二维码,效果图如下: 鼠标未指上时: 鼠标指上后: 代码如下: .div1 .li2 .code_wexin{ width: 0px; height: 0px; position: ...
- H5取经之路——CSS基础语法
一.CSS常用选择器 [选择器的命名规则] * 1.只能有字母数字下划线组成,不能有其他任何字符 * 2.开头不能是数字 [通用选择器] * 1.写法:*{} * 2.选中页面中的所有标签 * 3.优 ...
- H5取经之路——随便写点儿
[相对定位] * 1.使用position:relative:设置元素为相对定位的元素: * 2.定位机制: ①相对于自己原来文档流中的的位置定位,当不指定top等定位值时,不会改变元素位置: ②相对 ...
- 【黑马pink老师的H5/CSS课程】（二）标签与语法
视频链接:P8~P29 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动 参考链接: HTML 元素 1.HTML语法规范 1.1 基本语法概述 HTML 标签是由尖 ...
- 微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
以前微信浏览器内想要直接唤醒 app 要么接微信的应用宝要么你是腾讯的干儿子. 而在微信在2020年5月分推出了“微信开放标签”功能 wx-open-launch-app 用于微信浏览器内直接唤醒 a ...
- H5小技巧之——巧用<a>标签锚链接（#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接）
#作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...
- 微信h5跳转小程序wx-open-launch-weapp开放标签不显示（已解决）
前言: 前几天成功对接了跳转第三方小程序的功能,今天有个页面有需要对接.但是奇怪的是用的和上次一模一样的配置,但就是死活不显示wx-open-launch-weapp这个开放标签的按钮,看不到任何效果 ...
- redis取经之路
redis基本数据结构 Redis使用的是自己构建的简单动态字符串(SDS)[simple dynamic string,SDS]的抽象类型,并将SDS用做Rdis的默认字符串表示 redis> ...
- H5新增标签
<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content=& ...
随机推荐
- Enterprise Architect 时序图
添加时序图 1,在类图下面新建包 添加sequence时序图 点击流程控制,可以打开流程控制设计界面 我选择的是Lifeline线,你可以选择都差不多. 点击其中一条liftline连到其他上面 双击 ...
- SpringIOC和AOP简单概述
Spring学习:主要学习两大块IOC AOP 一.IOC IOC:控制反转(也可以叫做依赖注入)的基本认识: 当某个Java对象(调用者)需要调用另一个Java对象(被依赖对象)的方法时 ...
- c++11の简单线程管理
1.简单的例子 #include "stdafx.h" #include <iostream> #include <thread> void functio ...
- jdk 环境变量
1. jdk安装后的目录 2.JAVA_HOME C:\Program Files\Java\jdk1.8.0_172 3.PATH %JAVA_HOME%\bin 4.CLASSPATH .;%JA ...
- SQL AUTO INCREMENT 字段
Auto-increment 会在新记录插入表中时生成一个唯一的数字. AUTO INCREMENT 字段 我们通常希望在每次插入新记录时,自动地创建主键字段的值. 我们可以在表中创建一个 auto- ...
- Linux系统中常见的目录名称以及相应内容
目录名称 应放置文件的内容 /boot 开机所需文件——内核.开机菜单以及所需配置文件等等 /dev 以文件形式存放任何设备与接口 /etc 配置文件 /home 用户家目录 /bin 存放单用户模式 ...
- [LeetCode] 5. 最长回文子串
题目链接:https://leetcode-cn.com/problems/longest-palindromic-substring/ 题目描述: 给定一个字符串 s,找到 s 中最长的回文子串.你 ...
- .NET 开源项目 Polly 介绍
今天介绍一个 .NET 开源库:Polly,它是支持 .NET Core 的,目前在 GitHub 的 Star 数量已经接近 5 千,它是一个强大且实用的 .NET 库. Polly 介绍 官方对 ...
- GEC6818连接Ubuntu，下载程序至开发板
使用 secure CRT连接开发板,可视化操作 连接成功 设置临时ip ubuntu 要跟 开发板同一网段: ip前三位相同 代码:sudo service tftpd-hpa restart 代 ...
- Nginx部署静态页
简答说一下如何用Nginx部署静态网页,并绑定域名访问 1.通过FTP上传静态页到服务器指定目录 2.编写nginx的.conf文件 3.重启nginx 如图,这是centos上传文件路径 nginx ...