初识HTML

HTML、XML、XHTML 有什么区别

  • HTML全名为超文本标记语言(Hyper Text Markup Language),是用于创建Web的标准的标记语言,语法松散,不严格,编码不规范,表现、结构混乱。
  • XML是可扩展标识语言(The eXtensible Markup Language),比html更为严格,用途是定义结构、存储信息、传送信息。
  • XHTML是可扩展超文本标记语言(eXtensible HyperText Markup Language),是一种标记语言,基于XML,表现方式与超文本标记语言HTML类似,不过语法上更加严格。

怎样理解 HTML 语义化

语义化是数据和表述的本体的映射成为可能,首先表达出结构,并且通过一些结构的直接声明(约定俗成)让计算机可以找到这些结构的本体,然后计算机就可以通过本体的关系来进行逻辑演绎。我们目前可用的技术里面应该充分的考虑到计算机非常弱的理解能力,尽量说一些约定俗成的东西,这样机器人就可以帮我们进行一些我们人类不太擅长但是它很擅长的推理计算了。那么最好我们能够让我们的文档在描述相关的本体的时候使用计算机更容易理解的结构,这就是语义化。也就是说用某一种模式来表达计算机可以理解的词汇,这就是HTML的语义化
通俗概括,语义化是为了让计算机能够很好的通过自描述的结构逐渐掌握我们人类的词汇,理解我们人在说什么,这样它就可以更好的为我们服务。

怎样理解内容与样式分离的原则

之前说到语义化是为了让计算机更好地理解我们人所要表达的内容
,因此我们必须回归内容本身,将内容本身的语义合理地表述出来,
再为不同的用户代理设计不同的样式描述,这就是内容与样式分离。
内容与样式分离
一方面 ,简化从全面重新设计到轻微设计调整的任何更改,对其中一部分内容或样式的更改使你无需改变其余整体。
另一方面,一篇文档的实际内容和意义,与这篇文档呈现给读者的方式,是相互独立的
这使得它很容易在同一内容应用不同的样式,即为不同的用户代理设计不同的样式描述。

有哪些常见的meta标签

1、指定字符集:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
2、向搜索引擎说明你的网页的关键字:
<meta name="keywords" content="关键字"/>
3、告诉搜索引擎你的站点的主要内容:
<meta name="description" content=""/>
4、告诉搜索引擎你的站点的制作的作者:
<meta name="author" content=""/>
5、定时让网页在指定的时间n内跳转
<meta http-equiv="refresh" content="n;url="/>
6、勇于设定网页的到期时间,一旦过期则必须到服务器上重新调用,需要注意的是必须使用GMT时间格式:
<meta http-equiv="expires" content="Mon,12 May 2010 00:00:00 GMT"/>
7、禁用缓存:
<meta http-equiv="pragma" content="no-cache"/>
8、cookie设定,如果网页过期,存盘的cookie将会被删除,需要注意的是也必须使用GMT时间格式:
<meta http-equiv="set-cookie" content="Mon,12 May 2010 00:00:00 GMT" />
9.浏览器的内核控制
<meta name="renderer" content="webkit|ie-comp|ie-stand">

文档声明的作用?<!doctype html> 的作用?

<!DOCTYPE> 声明处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。在制作网页时都需要定义文档的类型,即doctype。如果不声明网页的文档类型,浏览器在解析的时候会以混杂模式解析网页代码,不同的浏览器下,混杂模式解析的网页效果差别很大,会造成网页布局排版的错位,因此在写html代码前有必要写明文档类型。

严格模式和混杂模式指什么?

Doctype可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:严格模式和混杂模式
严格模式是浏览器根据web标准去解析页面,是一种要求严格的DTD,不允许使用任何表现层的语法,在严格模式中,浏览器以其支持的最高标准呈现页面,;

在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

模式触发

触发严格模式

触发严格模式很简单,就是正常的建立网页,声明正确的DTD,便是严格模式。
触发混杂模式

而混杂模式的触发可以通过在HTML文档开始不声明DTD,或者在DOCTYPE前加入XML声明<?xml version=”1.0〃 encoding=”utf-8〃?>来实现

浏览器乱码的原因是什么?如何解决

产生乱码的原因一般是文档没有声明自身的编码导致浏览器错误地使用了与文档不同的解码方式,从而导致内容无法正常显示
一定要清楚文件保存时的编码方式并在文件内声明

常见的浏览器有及其内核

浏览器 内核
IE浏览器(IE4以上) Trident内核(IE内核)
Mozilla Firefox Gecko
Google Chrome 前期webkit(苹果),如今blink
Opera blink
Safari webkit
搜狗浏览器、傲游浏览器、QQ浏览器 兼容模式(IE:Trident)和高速模式(webkit)
360极速浏览器 基于谷歌(Chromium)和IE内核
360安全浏览器 IE内核
Netscape Gecko

常见的标签及其应用场景

标签 场景
<html>...</html> 将所有HTML内容都包含在这个标签内
<head>...</head> 用于定义文档的头部,它是所有头部元素的容器。
<title>...</title> 文档的标题
<meta>...</meta> 提供有关页面的元信息
注释
bgcolor 页面背景色
text 文字颜色(规定所有文本颜色)
topmargin 上页边距
leftmargin 左页边距
rightmargin 右页边距
bottomargin 下页边距
background 背景设置
<font color="" face="" size=""></font> 控制字体;color="颜色";face,字体;size,字体大小。
< b > < /b > 字体加粗
< i >< /i > 倾斜
< u>< /u > 下划线
< strong >< /strong > 字体加粗(强调,语气加强用)
< em >< /em > 字体倾斜(强调,语气加强用)
<center></center> 居中。
< u >< /u > 下划线
h1~h6 标题(会自动换行)。HTML标题(Heading)是通过h1~h6 等标签进行定义的。重要性依次递减
< p > < /p > 段落标签(段落之间空行)
<div></div> 层标签(默认占一行)
< span > < /span > 层标签(默认用多大空间占多大空间)
< ol type="1 " > < li> < /li> < /ol> --有序列表,序号为1,2,3……,引号中可以更改序号形式,ol改为ul则为无序列表,不具备自动换行
<a href="超链接地址" target=“_blank”>超链接的文字</a> 超链接标签,href(hyperlink reference);_blank是在新窗口打开
< i m g src="图片地址" alt="文字" width="" height="" / > 图片链接标签,高跟宽设置一个即可,显示图片会按比例缩放。alt在图片无法加载时,显示文字,还可帮助搜索引擎搜索。< img / >必须单独出现。
<table></table> 表格
width 宽度,可以用像素或百分比表示。常用960像素。
border 边框,常用值0。
cellpadding 内容跟单元格边框的边距。常用值0。
cellspacing 单元格之间的间距。常用值0。
<tr></tr>
<td></td> 单元格
<th></th> 表头,单元格的内容自动居中、加粗
align :一行的内容的水平对齐方式
colspan="n" 合并同一行单元格(后面写代码要减去相对应的列)
rowspan="n" 合并同一列单元格(从第二行开始减去对应的列)
< a >...< /a > 定义锚,即在页面插入链接
< q >...< /q > 定义短引用
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • HTML、XML、XHTML 有什么区别 1.HTML 是用来描述网页的一种语言,指的是超文本标记语言 (Hype...
    饥人谷_牛牛阅读 678评论 0 2
  • 一、HTML、XML、XHTML 有什么区别 HTML: 超级文本标记语言是标准通用标记语言下的一个应用,也是一种...
    淡然7698阅读 236评论 0 1
  • 1.HTML、XML、XHTML 有什么区别 HTML: 超文本标记语言,是语法较为松散的、不严格的Web语言 对...
    饥人谷_米弥轮阅读 433评论 0 1
  • HTML、XML、XHTML 有什么区别: 都是标记语言 HTML:超文本标记语言 语言较为松散,不严格的web语...
    崔太阿阅读 197评论 0 1
  • 一、安装hustoj 百度“hustoj github”可以看到源代码和安装教程。 Ububun 14.04很16...
    池中雨景阅读 1,577评论 0 0