关键词:
Web前端之HTML标签总结
一、HTML基本原理
网页的原理:用户输入网址之后,对应的服务器就发现有人请求我的网页了,所以这个服务器就会把网页和相关的图片、js文件、css文件、flash文件都通过HTTP协议传输到用户的电脑里面。HTML页面在用户的电脑里面进行渲染。HTTP协议指的是超文本传输协议。每一个网址,都对应了服务器上面的确定的文件。
纯文本文件:只有内容,没有样式。常见的纯文本文件有:.txt、.html、.js、.css、.java。没有语义,即使你这个文件中的内容排版再清晰,那也是人认为的,实际上纯文本文件中的所有的文字生而平等,没有任何的语义。
HTML:超文本标记语言,HyperText Markup Language。就是通过标签对儿,给纯文本增加语义。也就是说,用文本给文本增加语义,所以这个叫做“超文本”。而有一对儿对儿标签,也成为“标记”,所以就是“超文本标记语言”。
二、HTML标签
1. 单标签:
注释:<!--注释信息--> 快捷键:Ctrl+/
换行标签:<br>
横线标签:<hr>
2. 双标签:
- 标题标签:<h1></h1>;<h2></h2>;<h3></h3>;<h4></h4>;<h5></h5>;<h6></h6>(从大到小)
注意:一个网页中1号标题标签最好出现一次
- 段落标签:<p></p>
- 强调标签:
文本标签:<font color="颜色属性" size="大小">改变属性</font>
加粗标签:<strong>加粗</strong>或者<b>加粗</b>
文字斜体:<em>斜体</em>或者<i>斜体</i>
下划线:<ins>下划线</ins>或者<u>下划线</u>
删除线:<del>删除线</del>或者<s>删除线</s>
- 没有语义的双标签:
<div>实现网页布局</div> <!-- 自己独占一行(块元素),可以包含任何标签-->
<span>在网页布局过程中使用</span> <!-- 不会发生换行(行元素) -->
3. 多媒体标签
图片标签:<img src="设置一个图片的路径" title="显示鼠标悬停文字提示" alt="图片显示不出来时,显示对图片的描述信息,并不是给用户看的,给搜索引擎提供搜索服务" width="宽度(有一个宽高比,防止图片失真,改变一个属性就可以)" height="高度">
4. 路径问题
- 绝对路径:
* 带有磁盘目录的路径
* 带有具体网址
- 相对路径:
* 如果资源文件(img)和当前文件(html)文件在同一个文件夹中,只要写文件的名称即可
* 如果资源文件(img)在当前文件的下一级目录:src='image/1.png'
* 如果资源文件(img)在当前文件的上一级目录:src='../../image/1.png'
5. 超链接
<a href="涉及到相对路径和绝对路径问题" title="显示文字提示">不跳转到任何页面写"#"</a>
<a href="#" target="默认值'_self':在当前页面中显示跳转页面,'_blank':跳转到新的窗口中打开页面">不跳转到任何页面</a>
超链接跳转页面的其他写法:在<head><base target="_blank"></head>,跳转到新的窗口中(对当前页面的任何超链接都有效)
6. 锚链接(超链接的另外一种用法,实现的是本页面的内部的跳转)
<a href="#">跳转到顶部</a>
<a href="#ID值">跳转到固定部分</a>
使用时需要给需要跳转的标签设定ID值
7. meta标签的用法;
<meta charset="UTF-8">:防止页面乱码
<meta name="keywords" content="女装、男装">:设置网页关键字,不是给用户用的,对搜索引擎提供帮助
<meta name="discription" content="设置网页描述信息">:设置网页描述信息,不是给用户看的,是给搜索引擎看的
<!-- 网页重定向 -->
<meta http-equiv="refresh" content="3;https://www.baidu.com/">:三秒后重新定位新的域名
8. link用法:
<link rel="icon" href="favicon.ico">:设置网页图标
注意;最好将图标放到网页的跟目录下,IE浏览器不支持这种方式,若果把网页放在服务器上,IE浏览器就支持这种方式
9. 列表标签
- 无序列表
<ul type="circle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
注意:* 无序列表中的列表项(li)可以包含任何标签
* 使用场景
- 有序列表
<ol type="I">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
- 自定义列表
<dl>
<dt>标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
注意:* 在dt列表中只能包含行内元素(span,a)
* 在dd列表中可以包含任何元素、标签
10. 表格
行:<tr></tr>
列:<td></td>
表格:<table></table>
表格的作用:显示数据、网页布局
属性;
border:设置边框,默认为0,无边框
cellspacing="0":设置td与td之间的距离,默认值为2
width="400"
cellpadding="10":设置内容与td左侧之间的距离
align="center":移动标签的位置,默认值left,设置对齐方式,如果给table设置align属性,智能让整个标签居中,内容不会居中,如果给tr或者td设置align属性,可以使内容居中
bgcolor="red":设置背景颜色
例子:
<table border="1" width="400" height="50" cellpadding="10" cellspacing="0" align="center">
aption><strong>人员信息表</strong></caption>
<tr align="center" bgcolor="red">
<th>姓名</th>
<th>年龄</th>
<th>体重</th>
<th>职业</th>
<th>性别</th>
</tr>
<tr align="center" bgcolor="green">
<td>张三</td>
<td>22</td>
<td>58kg</td>
<td>bigdata</td>
<td>male</td>
</tr>
<tr align="center" bgcolor="green">
<td>李四</td>
<td>21</td>
<td>58kg</td>
<td>deeplearning</td>
<td>female</td>
</tr>
</table>
- 表格中的标签:
表头标签:<th></th>,用法与<td></td>相同
标题标签:<caption>标题</caption>
表格结构:
table[border="1" width="400"cellspacing="0"]>tr*4>td*4直接按tab键,产生表格
<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
注意:表格一般就是这种结构,但是一般现在不采用这个了,浏览器可以自动产生<tbody></tbody>结构
合并单元格:
横向合并:<td colspan="2"></td>
纵向合并:<td rowspan="2"></td>
注意:会自动寻找下一行进行合并,所以必须要把相关的<td></td>标签删掉
细线表格的绘画:
<table align="left" cellspacing="1" cellpadding="10" width="400" bgcolor="green">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
11. 表单:收集用户的信息
- 表单组成:
提示信息
表单控件(重点)
表单域
- 表单域:
<form action="" method=""></form>
action:设置后台处理数据的后台程序
method:提交数据给后台程序的方式
get提交数据:将数据显示在地址栏中,具有数据大小的限制
post提交数据:会通过后台异步提交数据,安全性好
- 表单控件:
文本输入框:<input type="text" name="" maxlength="6" readonly="readonly" value="">
maxlength:设置最大程度
readonly="readonly":设置控件为只读模式
disabled="disabled":禁止用户输入
value="":设置默认值
name="":控件名称,后台程序通过这个属性获取对应的数据
id="":设置ID编号,也可以通过这个获取
密码输入框:<input type="password" name="pwd">
该控件的属性和文本输入框相同
单选输入按钮:<input type="radio" name="" checked="checked">
name="":备选值的name属性要设置一致
checked="checked":设置默认选中项
下拉列表:
<select multiple="">
<option value="hb">北京</option>
<option>广东</option>
<option>上海</option>
<option selected="selected">湖南</option>
</select>
属性:
selected="selected":设置默认选中项
multiple="":实现多选效果
其他写法:
<select>
<optgroup label="河北省">
<option>张家口</option>
<option>石家庄</option>
<option>邯郸</option>
<option>张北</option>
</optgroup>
</select>
多选控件:<input type="checkbox" checked="checked" name="">
checked="checked":默认选中项
上传资源控件:<input type="file" name="">
文本域:<textarea></textarea><br>
隐藏控件:<input type="hidden" name="" value="123">
按钮:
提交按钮:<input type="submit" name="submit">
普通按钮:<input type="button" name="" value="取消">:不能提交表单数据
重置按钮:<input type="reset" name="" value="重置">
分组控件和标题:<fieldset><legend></legend></fieldset>
12. 特殊符号
"空格字符":  :
"<": <
">": >
"&":&
"¥":¥
"版权":©
"注册商标":®
"摄氏度":°
"正负号":±
"乘号":×
"除号":÷
"平方2":²
"平方3":³
13. HTML5里面的标签(补充):
- 版本介绍;
html:4s+tab或者4t+tab或者xt=tab:产生不同的HTML版本,过渡版本和严格版本
过渡版本Transitional:可以包含所有的html元素(标签)和属性
严格版本strict:可以包含所有的html元素(标签)和属性,但是不包含已经废弃掉的标签,例如font、i和属性(align属性)
- 新标签:
<header>头部标签</header>
<nav>导航标签</nav>
<section>区域</section>
<footer>底部</footer>
<aside>侧边栏</aside>
<article>文章</article>
<!-- 注意:以上的标签和div的用法一样,如果在IE浏览器中无法显示上面的标签,只需要CSS样式中动态的写一个相同名字的标签即可 -->
<!-- 视频标签 -->
<video src="movie.mp4" controls="显示控制面板" autoplay="自动播放" loop="循环播放"></video>
<video src="movie.mp4" controls autoplay loop width="500"></video>
<!-- 宽度高度只设置一个即可 -->
<!-- 多种视频格式 -->
<video controls >
<source src="movie.mp4" type="">
<source src="movie.rmvb" type="">
</video>
<!-- 音频标签 -->
<audio src="See You Again.mp3" controls autoplay loop></audio>
<audio src="See You Again.mp3"></audio>
web前端之html标签总结(代码片段)
Web前端之HTML标签总结一、HTML基本原理网页的原理:用户输入网址之后,对应的服务器就发现有人请求我的网页了,所以这个服务器就会把网页和相关的图片、js文件、css文件、flash文件都通过HTTP协议传输到用户的电... 查看详情
web前端开发之html语言(代码片段)
文章目录一、前端语言功能介绍(HTML,CSS,JavaScript作用)1.1、HTML介绍1.2、HTML的初始格式1.2.2、初始标签二、标签分类2.1、单标签2.2、双标签三、字符集四、常用HTML基础标签4.1、标题设置4.2、文字设置4.3、段落设置4.4、跑... 查看详情
web前端开发之html语言(代码片段)
文章目录一、前端语言功能介绍(HTML,CSS,JavaScript作用)1.1、HTML介绍1.2、HTML的初始格式1.2.2、初始标签二、标签分类2.1、单标签2.2、双标签三、字符集四、常用HTML基础标签4.1、标题设置4.2、文字设置4.3、段落设置4.4、跑... 查看详情
web前端之css基础总结(代码片段)
Web前端之CSS基础总结(1)一、CSS原理1.HTML的局限性HTML满足不了设计者的需求,可以将网页结构与样式相分离,这样就可以在不更改网页结构的前提下,更换网站的样式。操作html属性不方便HTML里面添加样式带来的是无尽... 查看详情
web前端之css基础总结(代码片段)
Web前端之CSS基础总结(1)一、CSS原理1.HTML的局限性HTML满足不了设计者的需求,可以将网页结构与样式相分离,这样就可以在不更改网页结构的前提下,更换网站的样式。操作html属性不方便HTML里面添加样式带来的是无尽... 查看详情
web开发之html知识点总结(代码片段)
...c;用来写静态网页的语言,是设计页面的基础,由标签组成的语言,能展示超文本效果,即可以展示图片,由样式的文字,带跳转页面的文字等。HTML文件直接由浏览器解析,无需编译,正常由上到... 查看详情
web前端:html最强总结附详细代码(代码片段)
Web前端基础:Web前端:HTML最强总结附详细代码Web前端:CSS最强总结附详细代码Web前端:JavaScript最强总结附详细代码Web前端工具:Web前端:JQuery最强总结(附上详细代码)Web前端:Bootstrap最强总... 查看详情
web前端之css基础总结(代码片段)
Web前端之CSS基础总结(2) 六、CSS三大特性1.CSS层叠性-概念:所谓层叠性是指多种CSS样式的叠加是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属... 查看详情
web前端-html基础(代码片段)
Web前端Web前端基础HTML编程中命名规范网页的基本结构:网页运行的原理:HTML常见标签标题标签段落标签水平线标签有序列表标签无序列表标签描述标签表格标签表单form表单中常用的表单元素div分区标签span范围标签a超级... 查看详情
web前端html/css一文详解(代码片段)
现在对HTML和CSS的基础知识做一个详细的总结,文章内容很硬核。共有3w+字总结,建议收藏反复学习!适用于初学者学习或者熟练相关操作的人复习使用。文章目录HTML篇一.HTML简介1.什么是HTML?2.HTML标签3.HTML元... 查看详情
html中progress标签的定义及用法总结!(代码片段)
...rogress标签可以帮助我们轻松创建一个进度条,对于Web前端开发人员来说是非常有用处的,所以掌握好Progress标签的用法对于前端开发人员很重要。下面,小千就为大家分享在HTML中Progress标签的详细用法。“Progress”作... 查看详情
web前端之表格(代码片段)
目录一、表格二、长表格三、表格的样式1、HTML代码2、CSS代码四、表单1、表单2、form的属性2.1、文本框2.2、密码框2.3、提交按钮2.4、单选框2.5、多选框2.6、下拉列表五、表单补充1、按钮 编辑一、表格在现实生活中,我们... 查看详情
web前端:jquery最强总结(每个要点都附带完全案例详细代码!)(代码片段)
Web前端基础:Web前端:HTML最强总结附详细代码Web前端:CSS最强总结附详细代码Web前端:JavaScript最强总结附详细代码Web前端工具:Web前端:JQuery最强总结附详细代码Web前端:Bootstrap最强总结附详细代码JQ... 查看详情
web前端:css最强总结附详细代码(代码片段)
Web前端基础:Web前端:HTML最强总结附详细代码Web前端:CSS最强总结附详细代码Web前端:JavaScript最强总结附详细代码Web前端工具:Web前端:JQuery最强总结(附上详细代码)Web前端:Bootstrap最强总... 查看详情
web前端之css基础总结(代码片段)
Web前端之CSS基础总结(2) 六、CSS三大特性1.CSS层叠性-概念:所谓层叠性是指多种CSS样式的叠加是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属... 查看详情
web前端:javascript最强总结附详细代码(带常用案例!)(代码片段)
Web前端基础:Web前端:HTML最强总结附详细代码Web前端:CSS最强总结附详细代码Web前端:JavaScript最强总结附详细代码Web前端工具:Web前端:JQuery最强总结附上详细代码Web前端:Bootstrap最强总结附详细代... 查看详情
web前端:bootstrap最强总结附详细代码(带常用案例!)(代码片段)
Web前端基础:Web前端:HTML最强总结附详细代码Web前端:CSS最强总结附详细代码Web前端:JavaScript最强总结附详细代码Web前端工具:Web前端:JQuery最强总结附上详细代码Web前端:Bootstrap最强总结附详细代... 查看详情
前端学习总结(代码片段)
HTML1.HTML标准格式 <!DOCTYPEHTML><!--这是HTML5的文档声明--><html><!--这是html的开始标签--><head><!--这是设置网页标签,html的编码设置,以及标题和链接资源都写在这里--><!--这是设置移动端观看时,网页不缩放--... 查看详情