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:强制在同一行内显示所有文本