前端开发阶段-HTML、CSS

2018-09-23 本文已影响0人 wwweia

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

前端开发阶段-HTML、CSS

HTML技术

CSS

猜你喜欢

热点阅读