HTMLCSS学习笔记（一）——入门介绍

建站流程

网页构成

Web标准

（1）W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C (制定了结构(xhtml、xml)和表现(css)的标准，非赢利性的。)
（2）ECMA(European Computer Manufactures Association) 欧洲电脑场商联合会。 ECMA制定了行为(DOM(文档对象模型)，ECMAScript、bom)标准

HTML简介

HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。
XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。
HTML5指的是HTML的第五次重大修改（第5个版本）

HTML发展

编辑工具

网站站点的创建

1)站点的作用
A.用来归纳一个网站上所有的网页、素材以及他们之间的联系
B.规划网站的所有内容和代码整合资源
2)创建站点的步骤
创建网页所需各个文件夹 css、js、images、html、font等
3)文件的命名规则
A.文件命名规则：使用语义化的英文名，不用中文名
B.名称全部用大小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；必须以英文字母开头。
C.网站的首页必须命名为index.html不建议使用shouye.html

浏览器内核

浏览器内核即“渲染引擎”。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

HTML5基本结构

HTML语言

一：语言的构成
1.标签（标记、元素）：txt 写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素；
2.属性：标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内 一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序
二：html语法
常规标记（双标记）：
<标记名称 属性1名=“属性1值” 属性2名=“属性2值” ………… ></标记名>
空标记（单标记）：
<标记名 属性1名=“属性1值” />

HTML标签

1: 文本标题标签:h1 - h6

​ 2: 字体倾斜:em/i
3:字体加粗:b/strong
​ 4: 下划线、水平线、换行符:u、hr、br
​ 5: 段落标记:p
​ 6: 字符|小段文本:span
​ 7: 常用转义字符:空格  右尖括号 > 左尖括号 < 版权符号 ©
​ 8: div标签应用
​ 9: html注释符:<!--注释文本-->
10:上标、下标:sup、sub

HTML列表

1：无序列表 ul li

<ul>
	<li></li>
</ul>

空心圆：list-style-type: circle;
实心圆(默认)：list-style-type: disc;
正方形：list-style-type: square;

​2：有序列表 ol li

<ol>
	<li></li>
</ol>

type:规定列表中的列表项目的项目符号的类型
语法：<ol type=“ a"></ol>
1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。
a 字母顺序的有序列表，小写（a, b, c, d）。
A 字母顺序的有序列表，大写（A,B,C,D)
i 罗马数字，小写（i, ii, iii, iv）。
I 罗马数字，大写（i, ii, iii, iv）。

start 属性规定有序列表的开始点。(start的属性值必须是数字)
语法：<ol start="5"></ol>

​3：自定义列表 dl dt dd

<dl>
     <dt></dt>
     <dd></dd>
</dl>

HTML —— 超链接

<a></a>

属性：
href = ‘url’
target = “_blank / _self”;
title = ‘文本提示’
拓展：
href=“tel:0147-88469258”
href=“javascript:void(0);”

HTML —— 图片

<img>

属性：
src = ‘url’;
alt = ’ 标签 实例 带有指定替代文本的图像’
title = ‘文本提示’
width = ‘’
height = ‘’
border = ‘’

路径

绝对路径：指带域名的文件的完整路径。绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
相对路径：指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。分清楚 当前文件 与 目标文件
1、当前文件与目标文件的文件夹同级时，路径为 文件夹/目标文件文件名
2、 当前文件与目标文件在同级目录时，直接写上目标文件文件名
3、当前文件的文件夹与目标文件的文件夹同级时，…/（返回上一级）目标文件夹/目标文件名

表格

表格基本结构

<table>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

表格属性

1）width=“表格的宽度”
​2）height=“表格的高度”
​3）border=“表格的边框”
​4）bordercolor=“边框色”
​5）cellspacing=“单元格与单元格之间的间距”
​6）cellpadding=“单元格与内容之间的距离"
​7）align=“表格水平对齐方式”
​取值：left、right、center、
​valign=“垂直对齐” top\bottom\middle
​8）合并单元格属性：(td)
​合并列： colspan=“所要合并的单元格的列数"
​合并行： rowspan=“所要合并单元格的行数”

扩展知识点：

前端页面有哪三层构成，分别是什么？作用是什么？
结构层、表示层、行为层
结构层（structural layer）：由HTML或XHTML之类的标记语言负责创建。
表现层（presentation layer）:由css负责创建。
行为层（behaviorlayer）:负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和DOM主宰的领域。