前端概述
html
超文本标记语言，页面包含文本，图片，链接程序等元素
css
负责页面的样式设计
js
负责页面特效
# 自我介绍
付铭 18618176338
http://unclealan.cn/docs/python/front-end/chapter1/html3css3ji-chu.html
# HTML
### 1 HTML 基本语法
#### html标签
* 单标签 `<img />` 、`<img>`* 双标签 `<html> </html>`
#### 属性 属于标签
```html<img src="图片的地址"><table width="100" height="200"></table>```
#### 语法规范
* 标签嵌套 用缩进* 标签名 不区分大小写 建议小写* 属性名 不区分大小写 建议小写
#### 注释
```html<!-- 多行 --><!--多行-->```
#### 常用HTML实体
* ` ` 空格* `<` <* `>` >* `&；` &* `©；` 版权* `¥；` 人民币
### 2 HTML常用标签
#### 主体结构
* `<html></html>`* `<head></head>`* `<body></body>`
#### HEAD标签
* `<title></title>` 网站标题* `<meta>` 指定网页的元信息 指定关键字 指定描述 指定字符集 属性： charset、name、content* `<style></style>`* `<link>` 导入css或者指定网页图标 属性 src、 type 、 rel* `<script></script>` 导入javascript
#### 格式排版标签
* `<hn></hn>` 1~6 标题 * `<p></p>` 段落* `<pre></pre>` 原样输出* `<br>` 换行* `<hr>` 分隔* `<div></div>`
#### 文本标签
* `<em></em>` 强调 表现为斜体* `<strong></strong>` 强调 表现为粗体* `<mark></mark>` H5新增 表示被选择* `<sup></sup>` 上标* `<sub></sub>` 下标* `<ins></ins>` 添加的内容* `<del></del>` 删除的内容* `<ruby></ruby>` / `<rt></rt>` 加拼音 H5新增
### 4 CSS基本语法
#### 使用CSS
* link 引入外部的CSS文件* `<style></style>` 在html中写* 使用html元素的style属性
#### 格式
```css选择器 { CSS属性: 值; CSS属性: 值;}
选择器 {属性:值;属性:值} ```
#### 注释
```css/* */```
#### CSS长度单位
```px 像素em 默认大小的倍数百分比 默认大小参照cmmmpt```
#### CSS 颜色单位
```colorName： red/green/bue/purple/orange/yellow/pink/skyblue
rgb数字 rgb(34,45,23) rgb(20%, 57%, 100%)
16进制 #abcdef #f90 #ccc
```
### 5 CSS选择器
```#标签名选择器tagName { }
# 类名.className { }
#ID选择器#idName { }
# 全局选择器* { }
# 组合 后代元素选择器 选择器
# 组合 子元素选择器>选择器
# 群组选择器,选择器，选择器
# 多条件p.item
```
### 6 选择器优先级
```ID > CLASS > tagName > *
组合选择器 数数``` 不明白
### 7 CSS属性 常用
#### 字体
* font-family 字体家族 微软雅黑
* font-size
* font-weight(字体是不是加粗) normal/bold 字体是不是加粗
* font-style normal/italic(字体要不要编写)
* font-variant(字体变体) normal/small-caps(小型大写字母)
* font 复合属性
``` font:[weith | style | variant] size family ```
#### 颜色
* color
#### 文本
* word-spacing* letter-spacing* text-align: left / center /right* vertical-align: baseline / middle ....* line-height 行高 * text-decoration ： none/overline/underline/line-through* text-indent: 2em* word-wrap: break-word* overflow-wrap word-wrap的别名 CSS3* white-space pre pre-wrap
选择器分为id选择器和class选择器
选择器也有优先级*{}
关于ul和li的用法 相当于目录
关于ul的选择器
.list li{border:1px solid orange;}
<li>打开房间的开发进度看风景</li>
<ul><li>打开房间的开发进度看风景</li>
<li>打开房间的开发进度看风景</li>
<li>打开房间的开发进度看风景</li></ul>
<li>打开房间的开发进度看风景</li>