1. 首页
  2. IT资讯

教你快速入门,了解html基本标签

“u003Cdivu003Eu003Cpu003Eu003Cstrongu003E标签是由:小于号+中间字符+大于号组成的代码(注:代码的所有字符都由英文字符组成)u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E作用是给用户展示特定内容或是告诉浏览器与搜索引擎关于网页的部分信息u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Ettttttttt<!doctype html>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E单标签<<!doctype html>u003Cstrongu003E只有开始标签 u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E双标签<html><u002Fhtml>u003Cstrongu003E开始标签和结束标签成双出现u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E”u002F”:网页上如果某个标签的小于号后面有此符号的即为结束标签,没有此符号的则为双标签u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Ch1u003E<!—-> 的专业术语称为注释标签u003Cu002Fh1u003Eu003Cpu003E我们可以将一行代码的作用,含义,意图等信息写在这四个减号中间,让自己后期能够看懂之前写的什么u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fac4f1b97b8444e2d8a58d62ce9c6a211″ img_width=”706″ img_height=”95″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Feef5b8ad1b8f47f7a9380d3bec716dd6″ img_width=”715″ img_height=”449″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003Ediv标签的作用就在网页内容中间划分出若干个矩形区域,用以存放不一样的内容u003Cu002Fh1u003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F915ab10a2b23475a8f98a11c2b704f74″ img_width=”536″ img_height=”47″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003Eu003Cstrongu003E网页中间有部分内容重要程度明显高于其他区域:比如网页标题,网页logo,新闻标题等,这些重要区域就使用h系列的标签来划分u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E h系列标签重要度按以下顺序:u003Cu002Fpu003Eu003Cpu003E h1>h2>h3>h4>h5>h6u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Faf27deee4905440a823c7403e0c9e1a7″ img_width=”504″ img_height=”149″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003Eul( Unordered List )无序列表标签u003Cu002Fh1u003Eu003Cpu003E网页中间还有一些内容相似、结构相仿、布局接近的区域,像这一类区域我们就使用无序列表来进行区域划分u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F26b0937d19844a72b96bf57af807ec2c” img_width=”368″ img_height=”136″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003Eol( ordered lists )有序列表标签u003Cu002Fh1u003Eu003Cpu003E网页中间还有一些内容相似、结构相仿、布局接近但是每个区域的内容是有先后关系的的区域,像这一类区域我们就使用有序列表来进行区域划分,这一类区域大多用在详细法律条文、政府公告、产品说明等内容上u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fe4faa9213e4e4c238fe5a42ef610064b” img_width=”407″ img_height=”114″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003Edl( definition list )自定义列表标签u003Cu002Fh1u003Eu003Cpu003E网页中间还有一些内容不完全一样、结构相仿、布局接近、每个区域的内容没有先后关系的的区域,像这一类区域我们就使用有自定义列表来进行区域划分,这一类区域大多用在专业名词条目的解释,或是网页底部信息分类等内容上u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F66bd509df4b84d569e63d121f191c117″ img_width=”317″ img_height=”140″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E大段文字展示之p标签u003Cu002Fh1u003Eu003Cpu003E标签的作用就是在网页内容中间划分出一个专门存放大段文字的区域u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F9b87db64b935473f864e3c6a4f886d6a” img_width=”773″ img_height=”93″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E大段引用文字展示之blockquote标签u003Cu002Fh1u003Eu003Cpu003Eblockquote标签的作用就是:在网页内容中间划分展示大段引用自古典,古籍或是名人名言的区域u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F4ed9649387c640f4b6caa7536a848971″ img_width=”537″ img_height=”167″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E小行文字标注之span标签u003Cu002Fh1u003Eu003Cpu003Espan标签的作用就是在网页内容的大段文字中间标注一行或是数行文字,并给这些文字设置一些不一样的展示效果,比如:下划线,颜色u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F3d6a0184bd6b431c91a8a15d0dfcfd9a” img_width=”467″ img_height=”163″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E重要文字标注之strong标签u003Cu002Fh1u003Eu003Cpu003Estrong标签的作用就是在网页内容中的某段文字中间标注出特别重要的文字u003Cu002Fpu003Eu003Cpu003E注:u003Cu002Fpu003Eu003Cpu003E<em><u002Fem>标签的效果与strong类似,区别在于em标签包裹的文字重要性比strong标签低,但是em标签内的文字会产生倾斜效果u003Cu002Fpu003Eu003Cpu003E<i><u002Fi>标签的效果则是包裹一段文字,使被包裹的文字产生倾斜效果,但是被包裹文字的重要性不会有什么变化u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F00ad37423540455d82e19258411752e0″ img_width=”782″ img_height=”98″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E跳转链接之a标签u003Cu002Fh1u003Eu003Cpu003Ehref=“网页地址”: href是Hypertext Reference的缩写,意思是超文本引用,作用就是让我们可以点击网页的某些内容可以跳转到其他的网页上去u003Cu002Fpu003Eu003Cpu003Etraget=“页面打开方式”: ‘_blank’新页面打开; _self 默认打开方式,当前页打开u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F987ad9130c87433ab73b3463a408e857″ img_width=”814″ img_height=”54″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E网页图片展示之img标签u003Cu002Fh1u003Eu003Cpu003Esrc=“图片地址”:src是sourse的缩写,表示我们需要显示的图片文件所在的位置u003Cu002Fpu003Eu003Cpu003Ealt=“图片名称”:每个图片都是为了展示某些内容,alt里面的文字则是为了描述图片内容的u003Cu002Fpu003Eu003Cpu003Ewidth=“图片文件的实际宽度”:用以标注图文文件的实际高度,此处高度数据不可修改,不可因为布局需要改成其他非实际尺寸u003Cu002Fpu003Eu003Cpu003Eheight=“图片文件的实际高度”:同下u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F85e90d97b4d44b6c8a165954692f0d9a” img_width=”870″ img_height=”59″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003Eimg标签的文件地址代码详解u003Cu002Fh1u003Eu003Cpu003Esrc: 路径写法,不能出现中文u003Cu002Fpu003Eu003Cpu003E相对路径: 从本地文件(该代码所在文件的当前位置)出发寻找到目标文件u003Cu002Fpu003Eu003Cpu003E.u002F (当前目录) u003Cu002Fpu003Eu003Cpu003E..u002F(上级目录) u003Cu002Fpu003Eu003Cpu003E..u002F..u002F(上上级目录)类推u003Cu002Fpu003Eu003Cpu003E绝对路径: u003Cu002Fpu003Eu003Cpu003E从本地: D:u002Fprojectu002Fdemou002Fpic.jpgu003Cu002Fpu003Eu003Cpu003E从网络: :https:u002Fu002Fwww.baidu.comu002Fimgu002Fblabla.jpgu003Cu002Fpu003Eu003Ch1u003E网页图片展示之video标签u003Cu002Fh1u003Eu003Cpu003Evideo标签的作用就是在网页上展示一个视频u003Cu002Fpu003Eu003Cpu003E文件,这个标签也是HTML5时代的一个代表性存在u003Cu002Fpu003Eu003Cpu003Esrc=“视频地址”:src是sourse的缩写,表示我们需要显示的视频文件所在的位置u003Cu002Fpu003Eu003Cpu003Econtrols=“controls”:这是视频文件的控制按钮区域u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fb2454c706f674249a9e1a27a033203bc” img_width=”652″ img_height=”50″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E网页图片展示之audio标签u003Cu002Fh1u003Eu003Cpu003Eaudio标签的作用就是在网页上展示一个音频文件,这个标签也是HTML5时代的一个代表性存在u003Cu002Fpu003Eu003Cpu003Esrc=“视频地址”:src是sourse的缩写,表示我们需要显示的视频文件所在的位置u003Cu002Fpu003Eu003Cpu003Econtrols=“controls”:这是音频文件的控制按钮区域u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F79fd2fe417c0412c8e0ba27182d39c2e” img_width=”553″ img_height=”42″ alt=”教你快速入门,了解html基本标签” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E喜欢小编文章的可以点个赞关注小编哦,小编每天都会给大家更新文章。u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我自己是一名从事了多年的web程序员,小编为大家准备了新出的web学习资料,免费分享给大家!u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E如果你也想学习web前端,那么帮忙转发一下然后再关注小编后私信“01”可以得到我整理的这些web资料了(私信方法:点击我头像进我主页有个上面有个私信按钮)u003Cu002Fstrongu003E。u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:教你快速入门,了解html基本标签

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11204.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code