标签综合作演出习www.301.net,基础标签

  • 透过自己的观看比赛发掘hr标签能够写/也足以不写/,要是不写/那么就是根据HTML的正规来编排的,假设写上,那么便是比照XHTML标准来编排的

www.301.net 1

  • 壹、 更动文件扩张名:f2
  • 二、HTML就唯有多少个效应, 它是特意用来说述文本的语义的.
    也正是说咱俩得以采纳HTML来报告浏览器哪些是标题, 哪些是段落.
  • 叁、HTML其实是HyperText Markup Language的缩写, 超文本标志语言
  • 四、公司支付代码文件,必须用英文大概拼音命名
  • 5.html发展史:

唯独在HTML5中,由于HTML五包容HTML和XHTML所以写不写都足以

<a
href=”;

  • 那正是说之后咱们在做前端开垦时毕竟写照旧不写啊?

1993--IETF HTML1.0
1995--w3c HTML2.0
1999--w3c HTML4.01
2004--HTML草案
2008--HTML5正式版

其一实在万分轻易,只要遵循高端开拓工具,如webstorm的唤醒来写就能够了

<h二 id=”title壹”>开荒工具(工欲善其事必先利其器)</h二>

什么是URL

  • 1.我们在浏览器的地方栏中输入的地址其实正是U奥迪Q7L
  • 二.U奥迪Q5L格式:1二7.0.0.1/index.html (浏览器会活动补全http:和:80)
    http://127.0.0.1/index.html
    (浏览器会自动补全:80)
    http://127.0.0.1:80/index.html
    (完整格式)
    磋商项目://ip地址:端口号/能源路线/财富名称
  • 何以在webstorm中相当的慢的复制光标所在的哪1行?
  • 为了让大家越来越快的融合到编程的社会风气中, 不被繁琐的匈牙利(Magyarország)语单词所干扰,
    不用天天编写多数平昔不意思的重新代码,
    提高大家的开支效用现在的课程中大家统一行使最高级高发工具来编排网页

补充

  • U君越L全称Uniform Resource Locator(统一财富定位符),
    互联英特网的每1个财富都有三个唯一的U汉兰达L地址
  • 由于IP地址全都以数字, 没有任何的意义,相比为难回忆。
    所以在访问网页时最-
    大规模的不是IP地址而是“域名”(1串有意义的字母O翼虎数字)
  • 好比:
    http://www.baidu.com
    AND
    http://111.13.100.92:80/

按下键盘上的ctrl+d(windows,os都适用)

<h三 id=”title贰”>常见的前端开采工具</h三>

什么是HTTP协议

  • .HTTP是Hypertext Transfer Protocol的缩写, 超文本传输协议
  • 怎么在webstorm中连忙的删减光标所在的哪1行?
  • 记事本: 提醒效用较差
  • editplus/nodepad++: 提醒效果较差
  • Dreamwaver: 更偏向规划
  • Sublime: 轻量级,自带作用不太全, 可是插件十二分拉长
  • WebStorm: 重量级, 自带功用完善

什么是HTML

  • HTML其实是HyperText 马克up Language的缩写, 超文本标识语言

按下假盘上的ctrl+x(windows,os都适用)

![](https://upload-images.jianshu.io/upload_images/647982-df8583feeb15df72.png)

HTML的作用

  • HTML就唯有二个效果, 它是尤其用来描述文本的语义的.
    也正是说大家能够使用HTML来告诉浏览器哪些是标题, 哪些是段落.

  • 这几个用于描述其余文本语义的文书, 大家誉为标签.
    并且那个用于描述文本语义的标签以后在浏览器中是不会被展现出来的

  • 之所以辛亏因为HTML的这么些标签是特意用来叙述别的文本语义的,
    并且在浏览器中不会被出示出来, 所以我们称那几个文件为”超文本”,
    而这个文件又称作标签, 所以HTML被称作”超文本标识语言”

  • 如何在webstorm中让标签包裹一段内容,也正是机关在壹段内容前后加上标签?
  • 其它ide(zend studio、netbean等)
  • 为了让我们更加快的融合到编制程序的世界中, 不被繁琐的匈牙利语单词所搅扰,
    现在的课程中大家联合运用最牛逼最高级的高发工具WebStorm

html标签

  • 作用:
    用于告诉浏览器那是三个网页, 约等于说告诉浏览器作者是三个HTML文书档案

  • 注意点:

    • 其他具备的价签都不能够不写在html标签里面,
      约等于写在html发轫标签和甘休标签中间

按下键盘上的ctrl+alt+t,然后按下回车键,然后输入相应的价签就可以(只适用与windows)

<h三 id=”title3″>WebStorm安装和平运动用</h三>

head标签

  • 作用:

    • 用来给网址加多一些安插音讯
      例如:
    • 钦命网址的标题 / 钦点网站的小图片
    • 增加网址的SEO相关的消息(钦点网址的入眼字/内定网址的叙说消息)
    • 外挂一些外表的css/js文件
    • 增进一些浏览器适配相关的内容
  • 注意点:

  • 相似境况下, 写在head标签内部的剧情都不会显得给用户查看,
    也正是说一般景色下写在head标签内部的内容大家都看不到

  • 如何用键盘寻找有些内容?
  • 安装软件

title标签

  • 作用:

  • 专门用于钦点网址的标题,
    并且那些钦定的标题未来还会作为用户保存网址的默许标题

  • 注意点:

    • title标签必须写在head标签里面

ctrl+f

www.301.net 2

body标签

  • 作用:

  • 尤其用来定义HTML文档中必要出示给用户查看的内容(文字/图片/音频/摄像)
    注意点:

  • 固然说有时候你恐怕将内容写到了其余地点在网页中也能看到,
    可是相对不要那样干, 一定要将索要出示的剧情写在body中

  • 一对html标签中(2个html初步标签和1个html结束标签)只可以有壹部分body标签

那节课做的演习中关系到了多少个新的学问,正是让标题居中体现,大家点击开W3C的官方文书档案(W三school),看h一那节文化,开采能够给h1增添属性align,它有”left”,”right”,”center”那多少个属性值,我们用align=”center”来安装剧中,可是不推荐使用,因为html是语义化标签,而不是修改样式,然而不推荐使用不表达用持续,在此后的营业所级开辟中,能够应用css来修改样式

1.png

meta标签

  • 何以消除乱码现象?

  • 在head标签中增添<meta charset=”GBK” />, 钦定字符集

  • GBK(GB2312)和UTF-8区别

    • GBK(GB2312)里面积累的字符相比少, 仅仅存款和储蓄了汉字和一些常用外文
      体量十分的小
    • UTF-8里面积存的世界上保有的文字
      容积十分大
  • 那就是说在公司花费中大家相应利用GBK(GB2312)如故UTF-八呢?

    • 假使您的网站只有包罗普通话, 那么推荐使用GB2312, 因为它的体量更加小,
      访问速度越来越快
    • 借让你的网址除了普通话以外, 还蕴藏了一部分任何国家的言语 ,
      那么推荐使用UTF-八
    • 懒人推荐: 不管三七二101, 一律写UTF-8就能够
  • 注意点:

    • 在HTML文件中钦赐的字符集必须和保留那些文件的字符集1致,
      不然还是相会世乱码
    • 由此只是钦定字符集不必然能消除乱码难点, 还索要保留文件的时候,
      文件的保留格式必须和钦定的字符集壹致才干保险没有乱码难点

www.301.net 3

Paste_Image.png

www.301.net 4

HTML标签

2.png

HTML标签分类

  • 单标签
    唯有起先标签未有终结标签, 相当于由1个<>组成的

<meta charset="UTF-8" />
  • 双标签
    有始发标签和告竣标签, 约等于由3个<>和3个</>组成的

<html>
</html>

www.301.net 5

HTML标签关系分类

  • 并称关系(兄弟/平级)

<head>
</head>
<body>
</body>
  • 嵌套关系(父亲和儿子/上下级)

<head>
      <meta charset="UTF-8" />
      <title>百度一下,你就知道123</title>
</head>

3.png

DTD文档注脚

  • DTD文书档案证明格式:

<!DOCTYPE html>

注意事项:

 -<!DOCTYPE>声明必须是 HTML 文档的第一行,位于 <html> 标签之前
<!DOCTYPE> 声明不是 HTML 标签
<!DOCTYPE> 声明没有结束标签
<!DOCTYPE> 声明对大小写不敏感
这个声明浏览器会看, 但是并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制
不写也能运行
H5网页里面用H4也能运行

www.301.net 6

htm 和 .html扩张名分别

  • DOS操作系统(win玖伍或win98)下只可以协助长度为三的后缀名,所以是htm
  • 但在windows后缀长度能够高于几位,所以windows下无所谓htm与html,html是为长文件的格式命名的
  • 故而htm是为了合营过去的DOS命名格式存在的

4.jpg

WebStorm常见神速键

  • 什么在WebStorm中选拔快捷键创造贰个新的.html的文件

再者按下键盘上的Ctrl + Alt + Insert

  • 怎么样在WebStorm中让光标移动到眼下行的末梢

按下键盘上的End键就能够

  • 何以在WebStorm中让光标移动到当前行的最前头

按下键盘上的Home键就能够

  • 怎么着在WebStorm中让光标在多行中闪耀

按住键盘上的Alt键不放, 然后再按住鼠标的左键不放, 然后再拖动鼠标就能够

  • 怎么在WebStorm中神速的复制光标所在的那1行

按下键盘上的Ctrl + D

  • 哪些在WebStorm中连忙的去除光标所在的那1行

按下键盘上的Ctrl + X

  • 什么在WebStorm中让标签包裹一段内容, 也正是半自动在1段内容前后加上标签

按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入相应的竹签就能够

www.301.net 7

基础标签学习

5.jpg

H体系标签(Header 一~Header 6)

作用:

  • 用以给文本加多标题语义
  • 格式:

-<h1>xxxxxx</h1>
  • 注意点:
  • H标签是用来给文本增多标题语义的, 而不是用来修改文件的体裁的
  • H标签一共有陆个, 从H1~H陆, 最多就只好到6, 超越陆则不算
  • 被H类别标签包裹的始末会把持一行
  • 在H种类的价签中, H一最大, H6小小的
  • 在信用合作社开销中, 一定要慎用H系列的标签, 尤其是H一标签.
    在商家开荒中貌似意况下多个分界面中只好冒出一个H一标签(和SEO有关)

www.301.net 8

P标签(Paragraph)

  • 作用:
  • 报告浏览器哪些文字是三个段落
  • 格式:

-<p>xxxxxxxx</p>
  • 注意点:
  • 在浏览器中会单独占壹行

6.png

Hr标签(Horizontal Rule)

  • 作用:
  • 在浏览器上海展览中心示一条分割线
  • 格式:

 <hr />
  • 注意点:
  • 在浏览器中会单独占一行
  • 经过自个儿的体察开采H福特Explorer标签能够写/也足以不写/,
    假使不写/那么正是根据HTML的正式来编排,
    假若写上/那么就是按部就班XHTML的正经来编写.可是在HTML5中,
    由于HTML五包容HTML和XHTML全数写不写都能够.那么之后我们在做前端开拓时到底写依旧不写啊?
    根据高等开拓工具的唤醒来写就可以.
  • 鉴于hr标签是用来修改样式的, 所以不推荐使用.
    未来支出中增加水平线一般都采纳CSS盒子来做

www.301.net 9

7.jpg

www.301.net 10

8.png

  • 破解软件

www.301.net 11

9.png

www.301.net 12

10.png

www.301.net 13

11.jpg

www.301.net 14

12.jpg

www.301.net 15

13.png

www.301.net 16

14.png

  • 汉化软件

www.301.net 17

15.png

www.301.net 18

16.jpg

  • 安装模版

www.301.net 19

  • 始建文件

www.301.net 20

17.png

www.301.net 21

18.jpg

www.301.net 22

19.png

  • WebStorm常见飞速键

  • 怎么在WebStorm中应用飞速键创造三个新的.html的文本

    • 与此同时按下键盘上的Ctrl + Alt + Insert
  • 哪些在WebStorm中让光标移动到当下行的末段

    • 按下键盘上的End键就能够
  • 什么在WebStorm中让光标移动到当下行的最前面

    • 按下键盘上的Home键就可以
  • 如何在WebStorm中让光标在多行中闪烁

    • 按住键盘上的Alt键不放, 然后再按住鼠标的左键不放,
      然后再拖动鼠标就能够
  • 哪些在WebStorm中异常的快的复制光标所在的那1行

    • 按下键盘上的Ctrl + D
  • 什么在WebStorm中急忙的去除光标所在的那1行

    • 按下键盘上的Ctrl + X
  • 怎么着在WebStorm中让标签包裹1段内容, 也等于机动在一段内容前后加上标签

    • 按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入相应的竹签就能够

<h2 id=”title四”>基础标签学习</h二>
<h3 id=”title五”>H连串标签(Header 一~Header 6)</h3>

  • 作用:

    • 用来给文本加多标题语义
  • 格式:

    • <h1>xxxxxx</h1>
  • 注意点:

    • H标签是用来给文本增多标题语义的, 而不是用来修改文件的体制的
    • H标签一共有伍个, 从H一~H6, 最多就只可以到6, 当先6则不算
    • 被H连串标签包裹的剧情会把持1行
    • 在H类别的标签中, H一最大, H陆纤维
    • 在百货店费用中, 一定要慎用H体系的竹签, 尤其是H一标签.
      在店肆支付中貌似情形下多个分界面中只可以冒出二个H一标签(和SEO有关)

www.301.net 23

<h3 id=”title6″>P标签(Paragraph)</h3>

  • 作用:

    • 告知浏览器哪些文字是一个段子
  • 格式:

    • <p>xxxxxxxx</p>
  • 注意点:

    • 在浏览器中会单独占壹行

www.301.net 24

<h3 id=”title7″>Hr标签(Horizontal Rule)</h3>

  • 作用:

    • 在浏览器上出示一条分割线
  • 格式:

    • <hr />
  • 注意点:

    • 在浏览器中会单独占一行
    • 透过自己的洞察开采H汉兰达标签能够写/也足以不写/,
      如若不写/那么正是依据HTML的专门的职业来编排,
      若是写上/那么正是遵照XHTML的科班来编写.可是在HTML5中,
      由于HTML伍兼容HTML和XHTML全部写不写都能够.那么之后大家在做前端开辟时毕竟写照旧不写吧?
      遵照高等开垦工具的唤醒来写就能够.
    • 鉴于hr标签是用来修改样式的, 所以不推荐使用.
      以往支出中增多水平线一般都选择CSS盒子来做

www.301.net 25


<h2 id=”title8″>HTML注释(Annotation)</h2>

  • 怎样是注释?

    • 讲授是在装有Computer语言中都充裕首要的三个概念,从字面上看,正是注解、解释的情致
    • 注脚能够用来分解某壹段程序只怕某一行代码是何许意思,方便直接或工程师之间的沟通
  • 干什么要利用注释?

    • 适用的注释,能够让大家的主次更为可读,所以用普通话提示本身,这里的次序是为何的
  • 疏解格式

<!--被注释的内容-->
  • 注意点:
    • 被讲明的剧情不会在浏览器中展示, 注释是写给大家和赏心悦目的
    • 评释无法嵌套使用

<!--<!--被注释的内容-->-->
  • 快捷键: ctrl + /

<h3 id=”title9″>img标签(image)</h3>

  • 意义: 在网页上插入一张图片

  • 格式: ![](图片路径)

  • 标签的脾性

    • 写在标签中K=”V”这种格式的文书大家誉为标签属性
属性名称 作用
src(source) 告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片
alt(alternate) 规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本
title 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
height 设置图片显示的高度
width 设置图片显示的宽度
  • 注意点:
    • img标签增添的图纸私下认可不是占一整行空间
    • 若是想让图片等Bila伸, 只写中度大概增长幅度就可以

www.301.net 26

<h3 id=”title10″>br标签(Break)</h3>

  • 作用:

    • 让内容换行
  • 格式:

    • <br/>
  • 注意点:

    • br的乐趣是不另起一个段落进行换行,
      而网页中9玖.9九%急需换行时都以因为另起了八个段子, 所以应该用p来做

<h3 id=”title11″>相对路线和相对路径</h三>

  • 图片路线分为三种, 壹种是相对路线, 一种是相对路线,
    我们重点学习相对路径, 因为在商家级开垦中未有人利用绝对路线

  • 相对路线

    • 从Computer的实际盘符伊始搜寻大家需求的能源
    • ![](F:/lnj/girl.png)
    • 以上代码表示在F盘下查找lnj文件夹,
      然后在lnj文件夹下查找girl.png图片
  • 相对路线

    • 二个文本相对于别的3个文本的职位寻觅我们必要的财富
    • ![](girl.png)
    • 即使html文件和girl.png都在lnj文件夹下,
      以上代码表示在lnj文件夹下查找girl.png图片
  • 何以没人使用相对路线?

    • 能够移植性太差.
  • 哪些是可移植性?

    • 能够总结的敞亮为把写到的代码拷贝到其余一台Computer上是还是不是能够平常运转
  • 为啥绝对路线可移植性差?

    • 要是自个儿编写的html文件放在自个儿Computer的 F:/lnj 目录下,
      html文件中用到的图片放在F:/lnj/images目录下,
      作者给src钦定的相对化路为F:/lnjgirl.png.
      那么现在本身将整个lnj文件夹拷贝给你,
      借令你将lnj文件夹放在非F盘下, 那么将不能够展现图片
    • 诸如你存放在C盘根目录,
      那么图片的相对路线会变为C:/lnjgirl.png,
      而src会去F盘找, 所以不会议及展览示
    • 您唯有将lnj文本夹存放在F盘根目录下时图片才会符合规律运营,
      那就叫做可移植性不好
  • 为啥相对路线可移植性好?

    • 同上, 假设src钦赐的路线为images/girl.png,
      那么不论是你拷贝到那么些盘, 哪个文件夹.
      系统都只会在当前文件夹中的images下去查找图片,
      不会遭到盘符和存款和储蓄地方的震慑,
      只要保险页面和图片地方的相对关系不改变就不会潜移默化到图片的显得
  • 相对路线两种检索方法

    • 同级
      • 直白编写, 举例: girl.png
      • 加上./ 编写, 例如./girl.png
      • ./代表当前目录, ./girl.png表示在当前目录下搜寻
    • 下级
      • 平昔编写, 比如abc/girl.png
      • 加上./ 编写, 例如./abc/girl.png
      • 争辨当前目录有多少个文本夹,就在前边依次补全多少个公文夹名称就能够,
        例如
        abc/bbb/ccc/ddd/girl.png./abc/bbb/ccc/ddd/girl.png
    • 上级
      • ../代表做客上级目录
      • 假如a文件夹下边有b文件夹, 图片存放在a文件夹中,
        html文件存放在b文件夹中, 那么路线为../girl.png
      • 因为html文件在b文件夹中, 所以路线是相对于b文件夹的,
        所以../代表做客b文件夹的上一级目录,
        b文件夹的上一流目录是a文件夹,
        所以../girl.png就象征在a文件夹查找girl.png

  • 注意事项:
    • 相对路线不会见世那种格式aaa/../bbb/girl.png
    • 固然能够来得, 可是店四花费中相对不要这么写

<h3 id=”title12″>a标签(anchor)</h3>

  • 格式: <a href="http://www.it666.com">江哥博客</a>

  • 意义: 用于从多少个页面链接到另二个页面

  • 注意事项:

    • 在a标签之间自然要写上文字, 假设未有, 那么在页面上找不到这些标签
    • a标签也叫做超级链接超链接
  • a标签的属性

属性名称 作用
href(hypertext reference) 指定跳转的目标地址
target 告诉浏览器是否保留原始界面, _blank保留, _self不保留
title 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)
  • base标签和a标签结合使用
    • 固然每一种a标签都想在新页面中开采,那么每一个设置a标签的target属性比较费心,
      那时大家得以行使base和a标签结合的诀窍,叁回性设置有a标签都在新页面中开荒
    • 格式: <base target="_blank" />
  • 注意事项:
    • base必须嵌套在head标签里面
    • 比如标签上点名了target,base中也钦点了target,那么会根据标签上点名的来实践

  • a标签此外用法
    • 假链接(本质是跳转到当前页面)
      • 格式<a href="#">江哥博客</a>
      • 格式<a href="javascript:">江哥博客</a>
    • 跳转到当前页面指定位置(锚点链接)
      • 2.1.格式<a href="#location">跳转到指定位置</a>
      • 二.②.在页面包车型大巴钦点地方给自由标签增多2个id属性
        • 例如 <p id="location">这个是目标</p>
    • 跳转到指定页面的指定位置
      • 格式:
        <a href="01-锚点链接.html#location">跳转到指定位置</a>
      • 只须求在01-锚点链接.html页面增加三个id地方就能够
    • 下载(极力不推荐使用)
      • 例如<a href="girl.zip">下载福利资源<a/>

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注