HTML基础--基础标签

2017-06-14  本文已影响16人  Dxc_iOS
HTML基础--基础标签

跟着视频学习了HTML5,简要记录一下学习的笔记。

基础标签学习

H系列标签(Header1~Header6)

-作用:
-用于给文本添加标题语义
-格式 :

<h 1>xxxxxxx</h1>(注释:h和1之间加了空格,原因是不加,简书就只显示XXXX了,泪奔~,)

-注意点:
-用来给文本添加标题语义的,而不是用来修改文本的样式的
-H标签一共有六个,从H1~H6.最多只能到六个,超过六个则无效。
-被H系列标签包裹的内容会独占一行
—在H系列的标签中,H1最大,H6最小
—在企业开发中,要慎用H系列的标签,特别是H1标签,开发中一般情况下一个界面中只能出现一个H1标签(与SEO有关)

P标签(Paragraph)

-作用:
—告诉浏览器哪些文字是一个段落
-格式:

< p>xxxxxx</p >

-注意点:
-在浏览器中会单独占一行

Hr标签(Horizontal Rule)

-作用:
-在浏览器中添加一条分割线
-格式:


或者<hr />

-注意点:
-在浏览器会单独占一行
-/可以写,也可以不写。
快捷键:
-如何在WebStorm中让光标在多行中闪烁
——按住键盘上的Alt键不放,然后在按住鼠标的左键不放,然后拖动鼠标即可
-如何在WebStorm中快速的复制光标所在的那一行
—— 按住键盘上的Ctr+D
-如何在WebStorm中快速的删除光标所在的那一行
—— 按住键盘上的Ctr+X
-如何在WebStorm中让标签包裹一段内容,也就是自动在一段内容前后加上标签
—— 按下键盘上的Ctr+Alt+T,然后按下回车,然后输入对一个的标签即可

注释

-格式:

<!—xxxxxxx —>

-快捷键: Ctrl+/

img标签

-作用:告诉浏览器显示一张图片

img 标签 格 式:< img src=“”> 即image source的缩写

-注意点:
-img标签不会单独占一行
-两个属相:width:宽度、height:高度
-如果img标签没有指定需要显示的图片的宽高,则系统会按照图片默认的宽高来显示,如果img标签指定宽高,则系统会按照指定的宽高显示。
-指定宽高,可能导致图片变形;
-如果不想让图片变形,只需指定img的宽和高其中一个值即可,只要指定了高度,系统会自动根据高度计算出宽度,反之自动计算高度,且都是等比拉伸,也就说不会变形。
-title,用于告诉浏览器,当鼠标悬停在图片上时,需要弹出的描述框中显示什么内容;alt,是alternate的缩写,交换的意思,作用是告诉浏览器当需要显示的图片找不到时显示的内容。

br标签

-作用:换行
-格式:

< br>

-注意点:
-多个br标签可以连续使用,使用几个就换几行
-br标签是不另起一个段落换行,在开发中一般情况下需要换行都是因为需要另起一段落,所以在企业开发中很少使用br标签

上一篇下一篇

猜你喜欢

热点阅读