码迷,mamicode.com
首页 > Web开发 > 详细

html基本基础

时间:2016-07-12 10:17:34      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

一 HTML5是用来做什么的?
PSD2HTML
信息
信息差(信息不对称)

二 html文件新建流程:
新建文本文件
网页文件后缀 .html
修改编码:ANSI格式,UTF-8无BOM格式
=======================
三 HTML5
狭义:超文本标记语言(第5代)
HTML4 - XHTML - HTML5
广义:H5
结构层:HTML5
样式层:CSS3
行为层:DOM,JavaScript

=======================

四 HTML标签(元素)

语法结构:
<标签开始 属性名="属性值">标签内容</标签结束>
<标签开始 属性名="属性值">
<标签开始>

凡是成对出现的语言结构,一律先输入起始结束,再填充内容


五:常用标签(最常用的标签,基本写出网站的90%的呢内容) 

1:超链接:行内
<a href="http://baidu.com/">百度</a>
<a href="http://baidu.com/" target="_blank">新窗口打开</a>
<a href="aaa">aaa文件夹</a>
<a href="bbb.html">bbb文件</a>
<a href="aaa/ccc.rar">aaa文件夹下的ccc,下载</a>
<a href="###">点击不动</a>

2:图片,行内
<img src="tu.png"> 同目录下,简写
<img src="./tu.png"> 同目录下,全称

<img src="aaa/tu.png"> ***下级目录,常用

<img src="../tu.png"> 上级目录
<img src="../aaa/tu.png"> 先上级,再下级目录

<img src="/tu.png"> 根目录

3:换行:行内
<br>

4:通用块级容器,块级
<div>通用块级容器</div>

5:通用行内容器,行内
<span>通用行内容器</span>

6:标题
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

7:段落
<p>段落</p>

8:无序列表
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>

9:注释
<!--
这是注释
-->
注释不能嵌套

 

完成一个网页所需最少标签:

<a href="###">baidu</a>
<img src="a.jpg">
<div>块级容器</div>
<span>行内容器</span>

<h1>一级标题</h1>
<p>段落</p>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>


-------------------------------------
六 HTML元素传统分类:
块级元素:div,h1,p,ul,li
一般情况:多个块级元素或块级和行内元素 并列,会自动换行
行内(内联)元素
多个行内元素,不换行
a,img,br,span

还可以分为:
语义性标签:a,img,h1,p,ul,li
非语义性标签:br,div,span

七 网页结构分析:
网页是三维结构
代码内用标签嵌套表示层级

八 HTML的语义性:
基本要求:HTML代码的基本结构要正确
高级要求:尽量使用语义性标签,找不到语义性标签再使用非语义性标签
网页使用什么标签
要看这个HTML模块到底是什么
而不是看这个模块像什么

HTML书写
理想状态:100%追求网页的语义性
现实情况:网页的语义程度受限于成本,不能追求无限的语义性
在基本语义实现的情况下,选写最少最快的那种

九 HTML语义性和效率实现均衡:
例子:网站logo
效率:
<a href="###"><img src="logo.gif"></a>
语义性:
<h1>百度</h1>
css:
h1 宽高
logo作为背景图
text-indent:-9999px 缩进

 

------------------------------------
十 HTML常用属性:HTML元素节点的钩子
id:id名
class:类名
相同:都用来标识元素
不同:
id名,值是唯一的
在同一个网页中,相同名字的id只能有1个
一个id名,只能有1个值
class类名,值不唯一
在同一个网页中,相同名字的class可以有多个
一个class类名,可以有多个值,空格分隔
注意:id和class命名规范:
1:不能以数字开头
2:命名尽量有语义性
3:一般来说:整体大块模块一般用id,小块用class

<div id="a1">11111111</div>
<div class="b2 cc d3">2222222</div>
<h2 class="b2">333333</h2>
----------------------------------------
十一 关于标签嵌套:
块级元素内部可以嵌套其他块级元素和行内元素
行内元素内部只能嵌套其他行内元素
特例:p标签是块级,但p标签内只能嵌套行内元素,举例

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

html基本基础

标签:

原文地址:http://www.cnblogs.com/lyp123/p/5662425.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!