Arya01
第一篇文章哦
对HTML和CSS的学习心得
HTML的学习
什么是HTML
HTML(Hyper Text Markup Language)是一种用来描述网页的超文本标记语言，不是编程语言。但HTML命令可以说明文字、 图形、动画、声音、表格、链接等，HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。HTML文档也就是网页。学HTML能做什么
既然HTML使用标记标签来描述网页，那理所当然我们可以用HTML来写一个静态网页。HTML写静态网页，CSS可为其设计样式，Javascript可以给网页增加动态成分。HTML语法
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
这是Dreamweaver中HTML文件打开的默认格式（我个人觉得DW写很有趣，因为可以拆分，一边写代码一边看效果，如果要用的话下载后需要先新建一个文件夹设置为站点，另外网页中需要用到的图片都可以放到这个文件夹中），由此代码可知HTML中的标签都是成对的，即为开始标签和结束标签。
a 标签
1.＜!DOCTYPE＞标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范；
2.＜html＞称为根标记，就是说明此文档是一个HTML文档；
3.＜head＞称为头部标记，即用来定义HTML文档的头部信息，可用来封装其他头部标记，比如＜meta＞标记有关页面的元信息，＜link>表示文档与外部链接的关系；1
<link rel="stylesheet"href="css/main.css"type="text/css"/>
4.< title>与< /title >之间即可显示HTML文档的标题；
5.< body >< /body > 之间即可写HTML文档的内容；
6.< p >< /p >是段落标记，< br/>是换行标记；
1
2
3<body>
<p>使用HTML制作网页时通过br标记<br/>可以实现换行效果</p>
</body>
7.< font >标记来控制网页中文本的样式，字体样式、大小和颜色；
1
<font 属性="属性值">文本内容</font>
8.图像标记< img src=””>
1
< img src="图像的路径（最好是相对路径）"/>
9.表格标记:
< table>< /table>用于定义一个表格，< tr>< /tr>用于定义表格中的行，但要嵌套在< table>< /table>中，< td>< /td>表示单元格，也要嵌套在< tr>< /tr>中；
10.表单标记
1
2
3<form action="url地址" method="提交方式" name="表单名称">
各种表单控件定义:<input type="控件类型"/>
</form>
b 还有其他一些标记就不做解释了，学习这个最好上手实现一下，会有点成就感的！！！
其他（学习时做的小笔记）
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如需显示小于号,我们必须这样写：< 或 < .
scheme://host.domain:port/path/filename
解释：scheme - 定义因特网服务的类型。最常见的类型是 http host - 定义域主机（http 的默认主机是 www） domain - 定义因特网域名，比如 w3school.com.cn :port - 定义主机上的端口号（http 的默认端口号是 80） path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。 filename - 定义文档/资源的名称使用 HTML5 的网站布局 （ HTML5 是最新的 HTML 标准,HTML5 是专门为承载丰富的 web内容而设计的，并且无需额外插件。HTML5拥有新的语义、图形以及多媒体元素。HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。)
HTML5 提供的新语义元素定义了网页的不同部分： HTML5 语义元素 header 定义文档或节的页眉 nav 定义导航链接的容器 section 定义文档中的节 article 定义独立的自包含文章 aside 定义内容之外的内容（比如侧栏） footer 定义文档或节的页脚 details 定义额外的细节 summary 定义 details 元素的标题
CSS的学习
CSS是什么
CSS是Cascading Style Sheet 的缩写，是“层叠样式表单”。CSS优点：样式丰富、易于修改、多页面应用、层叠等。
CSS能干什么
a CSS就是用来设计网页样式，且可以和网页内容信息分离设计的。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页
各元素进行格式化。b CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。
c CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。
d 名称CSS中的”层叠(cascading)”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。
CSS基础语法（这是我自己学的时候记的笔记，所以直接拷贝上来了）
1.CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的 HTML 元素，每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。
属性和值被冒号分开selector {property: value}；格式： 选择器{属性：值；属性：值}。
（如果值为若干单词，则要给值加引号）2.根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：
body{
font-family: Verdana, sans-serif; }根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。
3.在 CSS 中，类选择器以一个点号显示：
.center {text-align: center} //文字排列（text-alignment）和字体尺寸（font-size）4.CSS 背景属性
属性 描述 background 简写属性，作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 把图像设置为背景。 background-position 设置背景图像的起始位置。 background-repeat 设置背景图像是否及如何重复。5.字符转换
text-transform 属性处理文本的大小写。这个属性有4个值：none uppercase lowercase capitalize， 默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义， uppercase 和 lowercase 将文本转换为全大写和全小写字符。 最后，capitalize 只对每个单词的首字母大写。6.CSS 文本属性
属性 描述color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。7.CSS 伪元素用于向某些选择器设置特殊效果。伪元素的语法：
selector:pseudo-element {property:value;}
