总而言之,这就是一篇用来记录我学习前端历程的日志,希望不要断更。
朝着优秀的前端工程师努力吧!
HTML标签-排版标签
标题标签
标题使用<h1>
至<h6>
标签进行定义。
似乎已经在markdown中用了很多了,比如这篇日志
具有align
属性,可以规定标题的位置
不过使用的时候会标红,应该是在CSS中规定会更好一些吧
注释标签
1 | <!-- 我是 html 注释 --> |
段落标签<p>
p是paragraph 的缩写,段落标签可以将HTML文档分割为若干段落
与标题标签类似,align属性可以使用但是会标红
p标签是一个文本级标签,其中只能放文字、图片、表单元素,其余的一律不可以
HTML的标签是分等级的,将所有标签分为两种
- 文本级标签:p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。(a标签里不能放a和input)
- 容器级标签:div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
当尝试使用文本级标签去包裹类似标题之类的非文本级标签时,浏览器就会阻止我们这么做。
PS:Chrome浏览器是HTML5支持度最好的浏览器。提供了非常好的开发工具,非常适合我们开发人员使用。审查元素功能的快捷键是F12。
水平线标签<hr/>
水平分割线(horizontal rule)可以在视觉上将文档分割成各个部分。效果估计就跟
差不多
1 | <hr color="#000000" align="right" size="5" width="60" noshade="1"> |
一个代码范例,包含了<hr>
标签所能含有的属性们
align="属性值"
:设定线条置放位置。属性值可选择:left right center。size="2"
:设定线条粗细。以像素为单位,内定为2。width="500"
或width="70%"
:设定线条长度。可以是绝对值(单位是像素)或相对值。如果设置为相对值的话,内定为100%。color="#0000FF"
:设置线条颜色。noshade
:不要阴影,即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。
换行标签<br\>
如果希望某段文本强制换行显示,就需要使用换行标签
1 | This <br/> is a para<br/>graph with line breaks |
就跟‘\n’差不多
<div>
和<span>
标签
div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。想必你应该听说过“div + css”布局。(其实敲下这个教程的时候我没听过)
- div标签:可以把标签中的内容分割为独立的区块。必须单独占据一行。
- span标签:和div的作用一致,但不换行。
div和span的区别
<div>
是容器级标签,其中可以放所有元素甚至div自己,它会导致浏览器显示换行
<span>
是文本级标签,只能放置文字、图片以及表单元素,不能放p, h, ul, dl, ol, div等,但是它不会导致浏览器换行
1 | <div class="header"> |
以上就是div+css布局的示例,div标签负责布局、结构、分块,css负责样式,二者通过class相连接
div+css布局能精简代码,减少重构难度 | 提高网页访问速度 | 对搜索引擎优化友好 | 有较高的浏览器兼容性。
内容居中标签<center>
之前我们见到的center基本都是align属性的一种取值,而在此处它作为双边标签出现,其中的所有元素都会居中
在HTML5中center标签不建议使用(包括前面提到的所有修改样式的标签基本都不推荐使用),而是建议使用css布局来实现
预定义(预格式化)标签<pre>
还记得前面在“HTML的基本语法特性”中提过的“浏览器在处理html文件时,如果有空格、换行、Tab都将被折叠为一个空格显示”
而<pre>
标签就可以将保留标签内部所有的空白字符并原封不动地输出
真正排网页时这个标签几乎用不到(?
HTML标签-字体标签和超链接
字体标签
特殊字符(转义字符)
 
:空格 (non-breaking spacing,不断打空格)<
:小于号(less than)>
:大于号(greater than)&
:符号&
"
:双引号&apos
:单引号©
:版权©
&trade
:商标™
®
:注册商标®
¥
:人民币符号¥
¥(?°
:摄氏度°
&plusm
:正负号±
×
:乘号×
÷
:除号÷
²
:上标2²
³
:上标3³
绐
:文字绐
。其实,#32464
是汉字绐
的unicode编码。
比如说,你想把<p>
作为一个文本在页面上显示,直接写<p>
是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到转义字符。应该这么写:
1 | 这是一个HTML语言的<p>标签 |
下划线、中划线、斜体
<u>
:下划线标记<s>
或<del>
:中划线标记(删除线)<i>
或<em>
:斜体标记
上面的这几个标签,常用于做一些小装饰、小图标。比如:
这张图中,我们通过查看京东网站的代码发现,箭头处的小图标都是用的标签<i>
。
我也不知道是怎么实现的就是了
粗体标签<b>
或<strong>
(已废弃)
字体标签<font>
(已废弃)
属性:
color="红色"
或color="#ff00cc"
或color="new rgb(0,0,255)"
:设置字体颜色。 设置方式:单词 \ #ff00cc \ rgb(0,0,255)size
:设置字体大小。 取值范围只能是:1至7。取值时,如果取值大于7那就按照7来算,如果取值小于1那就按照1来算。如果想要更大的字体,那就只能通过css样式来解决。face="微软雅黑"
:设置字体类型。
举例:
1 | <font face="微软雅黑" color="#FF0000" size="10">vae</font> |
效果:
上下标<sup>
<sub>
除了可以通过转义字符直接打出上下标,我们也可以通过标签来将任何我们需要的东西打成上下标
———————————————几天没更新了,感觉快忘干净了属于是———————————————
超链接
1、外部链接:链接到外部文件
举例:
1 | <a href="02页面.html">点击进入另外一个文件</a> |
a是“anchor”锚
的缩写,就像这个页面往另一个页面的锚点,是文本级标签
href(hypertext reference):超文本地址。
当然也可以将文件名换做链接
1 | <a href="http://www.baidu.com" target="_blank">点我点我</a> |
2、锚链接
锚链接:给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就可以利用锚链接。
首先创建锚点,即使用name
或id
属性给特定位置起个名字,such as:
第11行代码表示,顶部这个锚的名字叫做name1。 然后在底部设置超链接,点击时将回到顶部(此时,网页中的url的末尾也出现了#name1
)。注意上图中红框部分的#
号不要忘记了,表示跳到名为name1的特定位置,这是规定。如果少了#
号,点击之后,就会跳到name1这个文件或者name1这个文件夹中去。
若将28行改为
1 | <a href="a.html#name1">回到顶部</a> |
这样执行的效果是点击后跳到a.html
页面的name1
锚点
说明:name属性是HTML4.0以前使用的,id属性是HTML4.0后才开始使用。为了向前兼容,因此,name和id这两个属性都要写上,并且值是一样的。
3、邮件链接
1 | <a href="mailto:xxx@163.com">点击进入我的邮箱</a> |
效果:点击之后,会弹出outlook,作用不大
超链接的属性
href
:目标URLtitle
:悬停文本。name
:主要用于设置一个锚点的名称。```
target1
2
3
:告诉浏览器用什么方式来打开目标页面。target
1
2
3
4
5
6
7
8
9
10
11
12
属性有以下几个值:
- `_self`:在同一个网页中显示(默认值)
- `_blank`:**在新的窗口(严格来讲是标签页)中打开**。
- `_parent`:在父窗口中显示
- `_top`:在顶级窗口中显示
`title`属性举例:
```html
<a href="09_img.html" title="很好看哦">结婚照</a>