HTML技术
-
HTML（Hyper Text Markup Language）即超文本标记语言，是用来编写网页文件的标准，定义了一组标记（tag，也称标签）用来描述Web文档数据。
-
网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。
-
HTML代码：用于展示需要显示的数据
-
CSS代码：使显示的数据更好看
-
JavaScript代码：使整个页面显示的数据具有动画效果
-
-
网页根据内容是否改变分为：静态页面、动态页面
-
静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
-
动态网页：会根据不同的情况展示不同的内容。例如:登录成功后右上角显示用户名。
-
-
HTML语言特点
-
HTML文件不需要编译，直接使用留言器阅读
-
HTML文件的扩展名是*.html或 *.html
-
HTML结都是由标签组成
-
标签名预先定义好的，只需要了解功能
-
标签名不区分大小写
-
通常由开始标签和结束标签组成。例如：<a></a>
-
如果没有结束标签，建议以/结尾。例如：<img/>
-
-
HTML结构包括两部分：头head和体body
-
-
常用标签
-
表格标签<table>
-
表单标签<form>
<form name="表单名称" method="提交方法" action="处理程序">各项表单域</form> -
输入域标签<input>
- type属性可取值：text（文本）、radio（单选）、checkbox（多选）、hidden（隐藏输入界面）、password（密码*回显）、file（文件上传）、email、url、date（日期或时间） pickers、search（搜索）、submit（提交）、reset（重置）
<input type="类型" name="输入项名称" value="输入项值"/> -
下拉列表标签<select>和选项标签<option>
<select name="名称"> <option value="value1">选项1</option> <option value="value2">选项2</option> ... </select> -
文本域标签<textarea>
<textarea rows="行数" cols="列数" name="名称">文本内容</textarea> -
块标签<div>
<div position=absolute|relative visibility=visible|hidden|inherit top="像素" right="像素" bottom="像素" margin="像素" height="像素" width="像素">文本块</div> -
超链接标签<a>
- target属性指打开目标页面方式，共_blank（新浏览器打开页面）、_self（当前浏览器打开页面）、_parent、_top、framename五种。默认为_self。
<a href="目标页面" target="打开方式">超链接名称或图片</a>
-
CSS
-
CSS样式表的定义
-
标记选择器——通过HTML标签定义样式表
-
类别选择器——使用class定义样式表
-
ID选择器——使用id定义样式表
-
-
样式表的使用
- 行内式（不需要定义选择器）：利用style属性直接为元素设置样表，只对当前的标签起作用。
<p style="color:#000000;font-style:italic;">正文内容</p>-
内嵌式:先定义有关选择器，再使用。
-
链接式：将定义好的CSS单独放到一个以.css为扩展名的文件中，再使用<link>标签链接到要使用的网页中，在<head></head>之间。
<link href=".css文件路径" type="text/css" rel="stylesheet"> -
CSS常用属性
- 字体属性
属性名 | 属性含义 | 属性值
---|---|---
font-family | 字体 | 取值（如“宋体”）
font-size | 字体大小 | 取值单位：pt（点数）,如12pt
font-style | 字体风格 | normal（普通，默认），italic斜体，oblique中间状态
font-weight | 字体加粗 | normal（默认），bold（一般），bolder（重），lighter（轻），number：100-900之间
font | 字体复合属性 | 用来简化CSS代码，可以为以上所有属性值，之间用空格分开
- **颜色背景属性**
属性名 | 属性含义 | 属性值
---|---|---
color | 颜色 | 颜色值是英文名称或十六进制RGB值，如red为#ff000
background-color | 背景颜色 | 同color属性
background-image | 背景图像 | none：不用背景；url：图像地址
background-position | 背景图片位置 | top、left、right、bottom、center等
background |背景复合属性 | 用来简化CSS代码，可以为以上所有属性值，之间用空格分开
- **文本段落属性**
属性名 | 属性含义 | 属性值
---|---|---
text-decoration | 文字属性 | none，underline：下划线，overline：上划线，line-through：删除线，blink：文字闪烁
vertical-align | 垂直对齐 | baseline、super、sub、top、text-top、middle、text-bottom
text-align | 水平对齐 | left，right，center，justify：两端对齐
text-indent | 文本缩进 | 长度或百分比
line-height | 文本行高 | 长度或百分比
white-space | 处理空白 | normal：将连续的多个空格合并，nowrap：强制在同一行内显示所有文本
网友评论