HTML简介
超级文本标记语言(HyperText Markup Language)是标准通用标记语言下的一个应用,也是一种规范和标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以 告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文 件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制 者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完 全相同的解释,因而可能会有不同的显示效果。
标签:用尖括号包围的关键词我们成为标签。通常HTML标签成对出现,如:、。
Ø 开始标签:标签对中的第一个标签是开始标签,也成为开放标签。如。
Ø 结束标签:标签对中的第二个标签是结束标签,也成为闭合标签。如。
元素:我们把匹配的标签对以及它们包围的内容称为元素。即(元素 = 开始标签 + 内容 + 结束标签)。
Ø 块级元素:在浏览器默认显示时以新行来开始(和结束)的元素。
Ø 内联元素:又称行内元素,在浏览器默认显示时在同一行按从左至右顺序显示,不单独占一行的元素。
属性:开始标签中那些以名称/值对的形式出现的内容,我们称之为属性。
HTML元素
根元素
<doctype> |
定义文档类型。 |
<html> |
定义 HTML 文档。 |
元数据元素
<head> |
定义关于文档的信息。 |
<meta> |
定义关于 HTML 文档的元数据。 |
<link> |
定义文档与外部资源之间的关系,一般用于引入样式表。 |
<base> |
定义页面上所有链接的默认地址或默认目标。 |
<title> |
定义文档标题。 |
<style> |
定义文档的样式信息。 |
脚本元素
<script> |
定义客户端脚本。 |
<noscript> |
定义当浏览器不支持脚本的时候所显示的内容 |
块元素
<body> |
定义文档的主体。 |
<h1> 、 <h2> ... <h6> |
定义文档标题。 |
<p> |
定义文档段落。 |
<blockquote> |
定义块引用。 |
<ul> 、 <ul> 、 <dl> |
定义列表。 |
<table> |
定义表格。 |
列表元素
无序列表
<ul> |
定义无序的列表。 |
<li> |
定义列表项。 |
有序列表
<ol> |
定义有序的列表。 |
<li> |
定义列表项。 |
定义列表
<dl> |
定义定义列表。 |
<dt> |
定义定义术语。 |
<dd> |
定义定义描述。 |
表格元素
<table> |
定义表格。 |
<thead> |
定义表格的页眉。 |
<tbody> |
定义表格的主体。 |
<tfoot> |
定义表格的页脚。 |
<th> |
定义表格的表头行。 |
<tr> |
定义表格的行。 |
<td> |
定义表格单元。 |
文本元素
文本格式化元素
<em> |
定义着重文字。 |
<strong> |
定义加重语气。 |
<sup> |
定义上标字。 |
<sub> |
定义下标字。 |
<ins> |
定义插入字。 |
<del> |
定义删除字。 |
<b> |
定义粗体文本。 |
<i> |
定义斜体文本。 |
<big> |
定义大号字。 |
<small> |
定义小号字。 |
链接与图像
<a> |
定义超链接 |
<img> |
定义图像。 |
<map> |
定义图像地图。 |
<area> |
定义图像地图中的可点击区域。 |
<div>
和 <span>
<div> |
定义文档中的分区或节(division/section)。 |
<span> |
定义 span,用来组合文档中的行内元素。 |
表单元素
<form> |
定义供用户输入的表单。 |
<input> |
定义输入域。 |
<textarea> |
定义文本域 (一个多行的输入控件)。 |
<lable> |
定义一个控制的标签。 |
<select> |
定义一个选择列表。 |
<option> |
定义下拉列表中的选项。 |
<optgroup> |
定义选项组。 |
<button> |
定义一个按钮。 |
<fieldset> |
定义域。 |
<legend> |
定义域的标题。 |
CSS
CSS简介
CSS是一种定义样式结构如字体、颜色、位置等的语言,用于描述网页上的信息格式化和现实的方式。CSS样式可以 直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。 外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
2.2 CSS语法
- css由两部分组成:选择器和声明。
选择器指定来声明应用于那个或者那些元素;声明用于设置元素的样式,用大括号括起来里面用分号隔开每一条。
在 <head>
中,可以用 <style>
和 <link>
标签。
选择器中有多项时,在前一项的前提下,后一项的样式为声明的样式,其他情况无效。
id选择器:
类选择器:
css文件中:.center {text-align:center}
HTML文件中: <h1 class="center">
center </h1>
- 背景属性:
background-color属性:(合理的英文颜色单词或#000000,默认值为transparent为透明)为元素设置背景色。background-image属性:(url(/i/emg_01.jpg),默认值为none)用图像做背景。
background-repeat属性:(默认repeat在所有方向重复,repeat-x在水平方向重复,repeat-y垂直方向重复,no-repeat不重复)设定重复方式。
background-position属性:(top、center、bottom每种情况的left、center、right三种位置共九种;(x,y),x和y由0%到100%从坐上到右下,也可以用数字表示像素,也可以混用)设置背景图像起始位置。
background-attachment属性:(fixed当页面其他部分滚动时背景不变)固定背景图像。
background-clip属性:(border-box背景被裁剪到边框盒,padding-box背景被裁剪到内边距框,content-box背景裁 剪到内容处)规定背景的绘制区域。
background-origin属性:(border-box背景被裁剪到边框盒,padding-box背景被裁剪到内边距框,content-box背景 裁剪到内容处)规定background-position属性的位置相对于什么来定位。
background-size属性:(x,y,可以为以父元素为基础的百分比或像素做单位;cover,扩展足够大,可能有的部分 无法显示;contain,扩展至适应内容区域的最大尺寸)设置背景图像的尺寸。
- 文本属性:
color属性:(合理英文颜色名,#00000,rgb(255,0,0))设定文本颜色。letter-spacing属性:(x,定义间距可以为负数单位像素)设定文本间距。
line-height属性:(x,可为百分比和像素,不能为负值)设定文本行高。text-align属性:(left,right,center,justify两端对齐)设定对齐方式。
text-decoration属性:(underline下划线,overline上划线,line-through横穿一条线,blink闪烁)文本划线样式修 饰。
text-indent属性:(x,可为以父元素为基础的百分比和像素)规定文本块首行文本缩进。text-shadow属性:(x,y,z水平阴影位置,垂直阴影位置,模糊距离,颜色)文本阴影。word-spacing属性:(x,定义间距可以为负数单位像素)设定字间距,单词以空格分开算。word-wrap属性:(break-word)在长单词或URL地址内部进行换行。
- 字体属性:
font属性:在一个声明中可以设置所有的字体属性。
font-style属性:(italic斜体,oblique倾斜,)设置字体倾斜样式。
font-variant属性:(small-caps显示小型大写字母的字体)设置为小型大写字母。font-weight属性:(x,400为默认,700为bold粗体)设置文本粗细。
font-size属性:(x,百分比或固定值)设置字体尺寸。font-family属性:为段落设置字体。
- 链接定义:
a:link {} 未被访问的链接
a:visited {} 已被访问的链接a:hover {} 鼠标指针移动到链接上a:active {}正在被点击的链接
hover要在link和visited之后,active要在hover之后。
text-decoration属性:(none去掉下划线,underline出现下划线)设置下划线。background-color属性:规定链接的背景色。
- 表格属性:
border-collapse属性:(collapse将边框合并为一个单一的边框)边框样式。caption-side属性:(top在顶端,bottom在低端)表格标题位置。
empty-cells属性:(hide不在空单元格周围绘制边框)是否显示空单元格。border-width属性:(x,y,z,w,上右下左,百分比或固定值)设置边框尺寸。border-color属性:(x,y,z,w,上右下左,四个颜色值)设置边框颜色。
width属性、height属性:(x,百分比或固定值)设置表格宽度和高度。
padding属性:(x,y,z,w,上右下左,四个位置内边距)声明所有的内边距,或者用padding-bottom,padding- left,padding-right,padding-top四个属性来替换。
border-style属性:(none无,dotted点,dashed虚线)定义边框样式。
margin属性:(x,y,z,w,上右下左,百分比或固定值)设置一个声明中的外边距。
css类型
内联方式
样式定义在单个的 HTML元素中内部样式表
样式定义在 HTML 页的头元素中外部样式表
将样式定义在一个外部的 CSS 文件中(.css 文件) 由 HTML 页面引用样式表文件
css选择器
标签选择器(如:body,div,p,ul,li)
类选择器(如:class=”head”,class=”head_logo”)
ID选择器(如:id=”name”,id=”name_txt”)
全局选择器(如:*号)
组合选择器(如:.head .head_logo,注意两选择器用空格键分开)
继承选择器(如:div p,注意两选择器用空格键分开)
伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)
JavaScript
JavaScript简介
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户 提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
是一种解释性脚本语言。
主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、
iOS等)。
JavaScript语法
js代码能直接嵌入网页的任何地方,通常放在 <head>
</head>
中,但会要求用户把所有js代码都下载解析执 行以后在呈现内容;
可以把代码单独的放在一个.js文件中,同时,多个页面可以引用同一份.js文件;
页面中可以多次编写 <script>
</script>
,但是浏览器会按照顺序执行这些JavaScript代码;
JavaScript中每个语句以 ; 结尾 每个语句块以 {…..} 注释用//或/* */
所有类型都是定义变量都是用 var, 如果一个变量没有通过var申明就被使用,那么该变量就自动被申明为全局变量;
hello.html
<html>
<head>
<title>js \</title>
<script type="text/javascript"> console.log("Hello javascript")
</script>
</head>
<body>
</body>
</html>
外部样式表
test.js
alert('Hello JS')
test.html
<html>
<head>
<title>js \</title>
<script type="text/javascript" src='test.js'> \</script>
</head>
<body>
</body>
</html>
火火的总结
- HTML展示内容,网页的骨架
- CSS美化页面{}
- JS让页面动起来,提高浏览体验。