HTML初学知识点

HTML、XML、XHTML 有什么区别?

发展趋势:
html(超文本标记语言)——xhtml(可扩展性超文本标记语言)——xml(可扩展性标记语言);

html:

1.对大小写不敏感;
2.标签不必成对出现;

xhtml:

1.对大小写敏感,必须是小写的;
2.标签必须成对出现,有开始标签就必须有结束标签;
3.属性值必须在引号之内;
4.不支持属性最小化:
eg:正确:<input checked='checked'>
错误:<input checked>

5.name属性不赞成使用,以后会被淘汰;

6.空元素也要结束标签:如:
,


(水平分割线)

xml:

html最终会发展到xml,xhtml是html想xml发展的一个过渡,xhtml的特性也适合xml;

怎样理解 HTML 语义化?

为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

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

CSS与HTML分离的优点
1、使页面载入得更快
由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式的逐层加载速度快。
2、修改设计时更有效率
在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。而表格布局则更不省事。
4、保持视觉的一致性
DIV+CSS最重要的优势之一:保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。
5、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中代码更加适合搜索引擎。
6、对浏览者和浏览器更具亲和力
对浏览者和浏览器更具亲和力,由于CSS富含丰富的样式,使页面更加灵活性,更加的美观,它可以根据不同的浏览器,而达到显示效果的统一和不变形。
CSS与HTML分离的缺点
1、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大。
3、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。
4、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。

有哪些常见的meta标签?

页面关键词
  <meta name="keywords" content="your tags" />

页面描述
  <meta name="description" content="150 words" />

搜索引擎索引方式
  <meta name="robots" content="index,follow" />

页面重定向和刷新
  <meta http-equiv="refresh" content="0;url=" />

其他
  <meta name="author" content="author name" />
  <meta name="google" content="index,follow" />
  <meta name="googlebot" content="index,follow" />
  <meta name="verify" content="index,follow" />

移动设备
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
  

WebApp全屏模式
  <meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏/设置状态栏颜色
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

添加到主屏后的标题
  <meta name="apple-mobile-web-app-title" content="标题">

忽略数字自动识别为电话号码
  <meta content="telephone=no" name="format-detection" />

忽略识别邮箱
  <meta content="email=no" name="format-detection" />

申明编码
  <meta charset='utf-8' />

优先使用 IE 最新版本和 Chrome
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  
  <meta http-equiv="X-UA-Compatible" content="IE=6" >
  <meta http-equiv="X-UA-Compatible" content="IE=7" >
  <meta http-equiv="X-UA-Compatible" content="IE=8" >

禁止浏览器从本地计算机的缓存中访问页面内容
  <meta http-equiv="Pragma" content="no-cache">
浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放。
<meta name="MobileOptimized" content="240"/>

文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

  1. 所谓的标准模式是指,浏览器按 W3C 标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。
  2. 浏览器解析时到底使用标准模式还是怪异模式,与你网页中的 DTD 声明直接相关, DTD 声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略 DTD 声明 , 将使网页进入怪异模式

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

html乱码原因与网页乱码解决方法,浏览器浏览网页内容出现乱码符合解决篇造成网页乱码原因主要是中文字内容与html编码不同造成。但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码。
一、乱码造成原因
1、比如网页源代码是gbk的编码,而内容中的中文字是utf-8编码的,这样浏览器打开即会出现html乱码。反之网页是编码utf-8,内容是gbk也会出现乱码。
2、html网页编码是gbk,而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
3、浏览器不能自动检测网页编码,造成网页乱码。
解决办法:
1.如果自己开发网页,必须网页加入meta charset编码标签。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
或<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
2.还有可能是你网页没有设置meta charset编码造成。导致浏览器不能识别你网页默认编码类型。解决方法:
1、如果浏览器浏览时候出现网页乱码,在浏览器中找到转换编码的菜单。
在IE9浏览器中需要转码的网页空白出右键鼠标,即可选择“编码”。
傲游浏览器中浏览需要转码的网页时,菜单“查看”-->“编码”即可选择转换编码
谷歌浏览器中浏览需要转码的网页时,点击右上角“三横”图标选择“工具”-->“编码”即可选择切换网页编码达到让浏览器浏览此网页不是乱码。

常见的浏览器有哪些,什么内核?

1,使用Trident的是internet explorer,国产的绝大部分浏览器。Trident是就是ie内核
2,使用Gecko的是Mozilla Firefox,使用 Gecko 内核的浏览器也有不少,如 Netscape MozillaSuite/SeaMonkey 等
3,使用Presto的是opera,这是目前公认网页浏览速度最快的浏览器内核
4,使用WebKit的有苹果的safari,谷歌的chrome,还有国产的大部分双核浏览器其中一核就是WebKit

列出常见的标签,并简单介绍这些标签用在什么场景?

hr标签

作用:在页面上显示一条横线
br标签

作用:换行
其他标签

B:加粗
U:下划线
I:倾斜
S:删除线
(不建议使用)
strong:加粗
em:倾斜
ins:下划线
del:删除线

img图片标签

src:图片的路径
alt:如果显示不出图片时,显示这个属性中的文字
title:介绍这张图片
a标签(超链接)

作用:可以在一个页面中跳转到另一个页面。
<a href="页面的路径">此处必要要有文字</a>
注意:在a标签之内必须要写文字,如果没有,那么这个标签在页面上找不到。
a标签可以不跳转(跳转到当前页面) href="#"
a标签在自己的页面进行定位:
设置a标签的`href="#id";
在页面的指定位置加入一个目标标签;
必须给这个标签设置一个id名:<p id="mubiao">这是目标</p>
target="_blank"跳转到一个新的页面;
target="_self"在当前页面进行跳转;
base标签

为页面上所有的a标签设置跳转方式
ul和li标签

ul是无序列表,li是定义列表项目
ul中的type属性的值:

  1. circle : 空心小圆圈
  2. square : 方块
  3. disc : 实心小圆圈
    ol有序列表标签

ol是有序列表
ol中的type属性的值:

  1. a : 以a b c..的形式
  2. 1 : 以1 2 3..的形式
  3. A : 以A B C..的形式
    ol中的start属性表示序号从几开始
    dl和dt自定义列表标签
            <dt>帮助中心</dt>
            <dt>在线客服</dt>
            <dt>订单操作</dt>
        </dl>```
table表格标签

```<table border="1" width="500" height="300" cellspacing="0" cellpadding="20" align="center">
            <caption>表头</caption>
            <tr align="center">
                <td colspan="2">张三</td>
                <td>18</td>
                <td rowspan="3">挖掘机</td>
            </tr>
            <tr>
                <td>马六</td>
                <td>19</td>
                <td>.net</td>
            </tr>
</table>```
caption:定义表格的表头
border:规定表边框的粗细(宽度)
width:表的宽度
height:表的高度
cellspacing:规定单元格之间的空白
cellpadding:规定单元边沿与其内容之间的空白
align:表格相对周围元素的对齐方式
bgcolor:表格的背景色
colspan:很同一行上的单元格
rowspan:合并同一列上的单元格
bordercolor:边框的颜色
valign:内容的对齐垂直对齐方式
th表格标题标签

用法和td一样,但是文字会自动加粗水平居中对齐
thead、tbody、tfoot标签

thead:定义表格的表头;
tbody:表格主体(正文)
tfoot:定义表格的页脚

<table border="1">
  <thead>
<tr>
  <th></th>
  <th></th>
</tr>
  </thead>
  <tfoot>
<tr>
  <td></td>
  <td></td>
</tr>
  </tfoot>
  <tbody>
<tr>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
  </tbody>
</table>
通常三个一起使用

embed音乐标签

src:指定音乐的来源
hidden:是否隐藏播放器界面
marquee滚动标签


DOCTYPE文档类型
作用:告知浏览器使用的哪种规范
HTML三种规范:
HTML Strict DTD:请求比较严谨的HTML类型(不提倡使用被淘汰的标签)
HTML Transitional DTD:相对而言比较规范不太严谨
Frameset DTD:使用框架时用到
XHTML(相对HTML更严谨)

link标签

引用外部的css
引用title图片:
<link rel="icon" href="1.icon">
meta标签

作用:可以提供页面的元信息,比如比如搜索引擎和更新频度的描述和关键词。
<meta name="Generator" contect="">用以说明生成工具
<meta name="KEYWords" content="">向搜索引擎说明你的网页的关键词。
<meta name="DEscription" content="你的名字">告诉引擎你的站点的制作的作者
<meta name="Robots" content="all|none|index|noindex|follow|nofollow">
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索,但页面上的链接可以被查询;
nofollow:文件将不被检索,页面上的链接可以被查询;
表单域

<form action="1.php" method="post">
        用户名:<input type="text" name="username" value="username" maxlength="8" />
        <br />
        <br />
        密&nbsp;码:<input type="password" name="pwd" value="pwd" max="20" />
        <br />
        <br />
        <input type="radio" name="gender" />男
        <input type="radio" name="gender" checked="checked" />女
</form>
action:处理信息
method="post|get" :get通过地址栏提供信息,安全性差;post通过1.php来处理信息,安全性高。
input

maxlength:限制输入的字符长度
readonly:将输入框设置为只读状态(不能输入)
disable:未激活状态(不能使用)
name:当前输入框的标识
value:输入框的值
radio是单选,对个radio时,将name的值设为一样,可是实现单选效果
checked:设置默认选中



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 一.HTML、XML、XHTML 有什么区别 什么是 HTML? HTML 指的是超文本标记语言 (Hyper T...
    Sunset125阅读 682评论 0 1
  • 一、HTML、XML、XHTML 有什么区别 1. HTML是什么? 描述网页的一种语言 超文本标记语言 (Hyp...
    饥人谷_CST阅读 796评论 0 7
  • 丢失一:放心 小时候,住的老房子,睡觉几乎可以夜不闭户,更不用担心会丢失什么。 虽然没有空调,但凉爽安静,空气清新...
    捡来的名字阅读 442评论 0 0
  • 这是每个月必做的一项行程和仪式 整个7月份还是收获满满的,签约了两个项目,工作还算顺利,原计划的三本书没有完成,继...
    雨过天晴2016阅读 158评论 1 1