美文网首页
HTML初学知识点

HTML初学知识点

作者: 北城_荒 | 来源:发表于2017-03-27 21:58 被阅读0次

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:设置默认选中



相关文章

  • HTML初学知识点

    HTML、XML、XHTML 有什么区别? 发展趋势:html(超文本标记语言)——xhtml(可扩展性超文本标记...

  • 初学者怎么做java项目

    初学者怎么做java项目 初学者做简单的项目需要掌握以下知识点: 一、前端 语言:HTML+CSS+JavaScr...

  • 初学html

    html笔记 1.Html 全称为:hypertext markup language 超文本标记语言 2. ...

  • 初学HTML

    学习笔记(四)初学HTML HTML初步认识 HTML是英语HyperText Markup Language的缩...

  • 初学html

    1,认识HTML HTML的全称为(Hypertext Markup Language)即超文本标记语言HTML的...

  • 初学HTML

    学习html的目的: 我在学校学的是计算机嵌入式,我选择的是单片机,偏硬件,用的是C语言,也找到了现在这份工作,是...

  • HTML初学

  • HTML初学

    HTML 标题 在线测试HTML 标题(Heading)是通过 < h1 > - < h6 > 等标签进行定义的。...

  • 前端的兴趣之路

    1、初学HTML以及CSS

  • 初学html 笔记

    1、元素标签,如p,当宽度、高度固定,内容超出时显示省略号。 需设置css样式: white-space: now...

网友评论

      本文标题:HTML初学知识点

      本文链接:https://www.haomeiwen.com/subject/qthdottx.html