【HTML】一篇文章通遍HTML基础

上周由于有任务所以加急学了HTML+CSS基础,并且做了一个网页。就最终作品来说算是比较完整地还原了自己想象中的网站,虽然兼容性很差,但是考虑到deadline如此,也是非常满意了。

同样由于赶工所以一周的学习都没有留痕迹,为了防止遗忘特在此从头到尾完整回忆一边HTML语法。

①先说说HTML

HTML全称HyperText Markup Language,很多同学学完后会问“明明所有标签都可以用div代替啊?那还用记那么多标签的拼写干什么?”注意了啊(敲黑板),它名字里可是有Markup在里面,要是全用div那你Mark什么? 

编写规则(转义字符):

有些字符在html中有特殊意义,要想让它们以文本形式显示而不是被认为是一个语句需要进行转义,就有了下面的规则:

[空格]   
<      &lt;
>      &gt;
&      &amp;
¥     &yen;
©      &copy;
®      &reg;
    

具体框架结构详见上一篇。

②再扯扯doctype

<!doctype html>

很多同学都忽略了开头这个doctype,现在的很多IDE也会在创建HTML文件时自动加上这一句。但是少了它HTML就完全不能被执行了,因为它的含义是该文档使用HTML标准规范,浏览器看不到这个就按普通文档算!

③然后,再谈谈属性

标签中可以夹属性,如

<input checked type="text" />

每个属性都可以赋值,那么,上面这个checked算是个什么呢?

这是个省略语句,展开应该是checked=”checked”

如此,标签名赋名字相同的值时,就可以省略。

那么,有哪些属性可以省略呢?

可省略的属性      代表功能
checked         复选框选中
readonly        该文本框只读(不可输入)
defer           全部页面载入后再加载脚本(增加网页加载速度)
ismap           用户点击此页面后将鼠标位置发送给服务器
nohref          area标签中表示该区域没有相关链接
noshade         规定水平线的颜色呈现为纯色,而不是有阴影的颜色
nowrap          文本框内文字不自动换行
selected        下拉列表中预先选择该项
disabled        该按钮不可用
multiple        上传文件等可选择多个
noresize        规定用户无法调整框架的大小

④最后,我们再分分标签

标签分为哪几种?按照其呈现的形式,我们可将其分为行级元素块级元素

我们知道,HTML网页在不使用分层、position的情况下会默认将标签从上到下排列,但是有些元素好像可以“横着排”,比如连续使用两个<span>标签的文本显示起来就在一行而不是纵向排列,这就是行级元素。而默认纵向排列,即使多个加起来不满一行也不会横向排列的标签就是块级元素

如图,“1”使用h1标签,是块级元素,所以即使它就一个数字的内容也会占满一行

而“222222222222”使用span标签,是行级元素,所以有多少字就占宽度,不会一次占满。

got it?

那么,哪些标签是块级元素,哪些是行级元素呢?

块级元素:

<address>…</adderss>

<center>…</center>  地址文字

<h1>…</h1>  标题一级

<h2>…</h2>  标题二级

<h3>…</h3>  标题三级

<h4>…</h4>  标题四级

<h5>…</h5>  标题五级

<h6>…</h6>  标题六级

<hr>  水平分割线

<p>…</p>  段落

<pre>…</pre>  预格式化

<blockquote>…</blockquote>  段落缩进   前后5个字符

<marquee>…</marquee>  滚动文本

<ul>…</ul>  无序列表

<ol>…</ol>  有序列表

<dl>…</dl>  定义列表

<table>…</table>  表格

<form>…</form>  表单

<div>…</div>

行级元素:

<span>…</span>

<a>…</a>  链接

<br>  换行

<b>…</b>  加粗

<strong>…</strong>  加粗

<img >  图片

<sup>…</sup>  上标

<sub>…</sub>  下标

<i>…</i>  斜体

<em>…</em>  斜体

<del>…</del>  删除线

<u>…</u>  下划线

<input>…</input>  文本框

<textarea>…</textarea>  多行文本

<select>…</select>  下拉列表

⑤剩下的,就都不难了

下面将罗列各个标签,文档中的标记代表如下:

<span>hi</span>  这里的hi称为在标签里

<meta name=”author” content=”Tim”> 这里的name和content称为标签的属性

标记形式(Note)=【Sig=Single=单标记=成单出现   Dou=Double=双标记=成双出现】

元素类型(Element)=【Blo=Block=块级元素  Row=Row=行级元素 Non=None=非显示元素】

表达式:[Note.Element]

属性:{内容枚举(小写,各例用逗号连接)/内容概括(大写)}

若有红色标记的属性则代表该属性不可忽略(不赋值),若忽略则该标签不可用

如:

<img>

[Sig.Row]

src={“PATH”}

position:{static,relative,absolute,fixed}

含义为:img标签为单标记的行级元素,其中有两个属性src和position,src填入内容为路径,且该属性不可被忽略,而position内容为static,relative,absolute,fixed其中的一个。

1.文档头部标记

⑴<meta> 定义页面信息标记

[Sig.Non]

标记定义页面的原信息,信息可包括多种形式。

属性:

<meta name=”名称” content=”值” />

名称可被替换为多种固定类型,可在值中定义名称的内容。

可选择的名称为:

keywords:搜索引擎辅助标签,为网站增加特征点,各标签之间用逗号隔开。

description:网页描述,辅助搜索引擎

author:声明网页作者

<meta http-equiv=”名称” content=”值” />

指定浏览器对网页的行为,如解码方式、跳转等。

可选择的名称为:

Content-Type:(对应值text/html;charset=utf-8)声明以utf-8解码

refresh:(对应值10;url=”A”)载入页面10秒后跳转至A网页

⑵<link>引用外部文件标记

[Sig.Non]

该标签用于引入外部文件

常用属性:

href:{URL}:引入的文件链接

rel:{stylesheet}:表示引入内容为一个外部样式表

type:{text/css,text/javascript}:表示引入文件类型为css样式表或者JavaScript脚本

⑶<title>设置页面标题标记

[Dou.Non]

标签内的内容将显示在浏览器标题上

⑷<style>内嵌样式标记

[Dou.Non]

标签中的值将作为css样式载入html标签,但为了分离css设计和html骨架所以不推荐使用该标签定义css内容,应更多地使用分离的文件承载css与html文件。

2.文本控制标记

⑴<hx>标题标记

[Dou.Blo]

设置标题,x=1~6,其中h1只能用一次。

常用属性:

align:{left,center,right}:对齐方式

⑵<p>段落标记

[Dou.Blo]

表示一段文本

⑶<hr />水平线标记

[Sig.Blo]

产生一个水平分割线

常用属性:

align:{left,right,center}:设置水平线对齐方式

size:{Pixel}:设置水平线粗细,默认2px

color:{COLOR}:设置水平线颜色

width{Pixel、%}:设置水平线高度

⑷<br />换行标记

[Sig.Non]

任何用<br />控制文本位置的程序猿都该被火刑

–某愤怒的编辑

3.文本格式化标记

⑴<b>文本粗体标记

[Dou.Row]

使内含文字格式化为粗体,无其他意义。

⑵<strong>强调文本标记(粗体)

[Dou.Row]

同样使文字格式化为粗体,但是具有强调意义,该意义会被搜索引擎理解。

⑶<i>文本斜体标记

[Dou.Row]

使内含文字格式化为斜体,无其他意义。

⑷<em>强调文本标记(斜体)

[Dou.Row]

同样使文字格式化为斜体,但是具有强调意义,该意义会被搜索引擎理解。

⑸<del>删除线标记

[Dou.Row]

为内含文字添加删除线。该标记还有<s>的写法,但不推荐使用。

⑹<ins>下划线标记

[Dou.Row]

为内含文字添加下划线。该标记还有<u>的写法,但不推荐使用。

4.功能标记

⑴<img>图像标记

[Sig.Row]

插入一个图像,默认原图像大小,不进行缩放。

src={PATH}:图像文件路径

alt={TEXT}:图片不能正常加载时显示的文字,也是搜索引擎获取图片信息的方式。从优化网页的角度看也是不可被忽略的。

title={TEXT}:鼠标悬停时显示的内容

width/height:图像的宽/高,值设定一个值会等比例放大,否则图像将拉伸

vspace={PIXEL}:设置图像顶部和底部的留白(垂直边距)

hspace={PIXEL}:设置图像左侧核右侧的留白(水平边距)

align={left,right,top,middle,bottom}:图像位于文字左(left)、右侧(right),图片顶部(top)、中线(middle)、底部(bottom)与文字第一行对其,其余在图片下

⑵<a>超链接标记

[Dou.Row]

标签内可为其他可见标签,用户点击时跳转至固定的目标

href={URL,PATH}:跳转目标位置

target={_blank,_self}:目标窗口弹出方式,有新窗口打开(_blank)和从原窗口(_self)打开

5.排版标签

⑴<ul>无序列表

[Dou.Blo]

创建一个无序列表,列表各项用<li>分隔

<ul>
  <li>我不是</li>
  <li>我没有</li>
  <li>我可没说啊</li>
</ul>

使用效果如下:

  • 我不是
  • 我没有
  • 我可没说啊

⑵<ol>有序列表

[Dou.Blo]

创建一个有序列表,列表各项用<li>分隔

<ol> 
  <li>我不是</li> 
  <li>我没有</li> 
  <li>我可没说啊</li> 
</ol>

效果如下:

  1. 我不是
  2. 我没有
  3. 我可没说啊

⑶<dt>无符列表

[Dou.Blo]

创建一个没有符号(圆圈、序号)的列表,各项用<dd>分隔

<dt> 
   <dd>我不是</dd> 
   <dd>我没有</dd> 
   <dd>我可没说啊</dd> 
</dt>

效果如下:
我不是
我没有
我可没说啊

⑷<nav>导航栏标签

[Dou.Blo]

代表内容为一个导航栏,并不会有什么优化,只是标记这是个导航栏,通常在其中套一个列表。

常用作以下场合:

传统顶部导航条、侧边导航栏、页内导航、翻页操作

⑸<header>标题标签

[Dou.Blo]

代表一个标题,但是同样不会对版式有什么优化,里面可以嵌套h1等达到标题效果。可以是页面的标题也可以是板块的标题,内容也可多可少,比如在里面套一个副标题。所以此标签在一个页面允许出现多次。

⑹<article>文章标签

[Dou.Blo]

代表一篇文章或者一个评论等,也不会对版式有什么优化,只是一个标记而已。

⑺<aside>附属标签

[Dou.Blo]

定义侧边栏、广告等信息,无板式优化。

⑻<section>版块标签

[Dou.Blo]

定义一个版块,但不是用于排版目的,若用于排版请用div

若article、nav、aside更适合时应用此更详细的标签

无板式优化

⑼<footer>页脚标签

[Dou.Blo]

定义一个页脚版块,但是该标签本身无版式优化,所以就算使用了footer还是该在哪里就在哪里,不会浮于底部。

 

 

发表评论

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据