Web前端基础介绍一

### HTML

- 作用: 搭建页面结构        , 类似盖房子(毛坯房)

- HyperTextMarkupLanguage  超文本标记语言
- 标记语言格式:<开始标签 属性='值'>标签体</结束标签>
- 超文本: 指不仅仅是纯文本,还包括字体相关和多媒体相关(音频,视频,图片)
- 学习HTML主要学习的就是有哪些html标签,以及用法

### 创建HTML页面

### 文本相关标签

- 内容标题h1-h6

  数字越小字越大, 字体加粗,自带上下间距, 独占一行

- 换行 br

- 水平分割线hr

- 段落标签p

  独占一行, 自带上下间距

- 加粗b

- 斜体i

- 下划线u

- 删除线s

### 列表标签

- 无序列表:  ul  li  
- 有序列表: ol li
- 列表嵌套: 有序列表和无序列表可以任意无限嵌套

### 图片标签img

- src: 资源路径
  - 相对路径: 访问站内资源使用
    - 图片和页面同级目录:直接写图片名
    - 图片在页面上级目录:   ../../图片名
    - 图片在页面下级目录:  文件夹名/图片名
  - 绝对路径:访问站外资源使用,称为图片盗链
- alt: 图片不能正常显示时显示的文本
- title:图片标题,  鼠标在图片上悬停时显示的文本
- width/height:设置宽高,   两种方式: 1. 像素  2. 百分比  , 如果只设置宽度 高度会自动等比例缩放

### 超链接a

- href: 资源路径,作用和src类似
- a标签包裹文本为文本超链接,包裹图片为图片超链接
- 页面内部跳转:  在href属性中添加#xxx   在目的地元素的里面添加id属性值为xxx

### 表格标签table

- 相关标签: 表格table  tr表示行  td表示列   th表头  caption表格标题
- 相关属性: border边框      colspan跨列   rowspan跨行  

### form表单

- 作用: 获取用户输入的内容并提交给服务器
- 相关代码:
 

```html
<form action="http://www.baidu.com">
    <!--placeholder:占位文本
    value:设置默认值
    maxlength:最大字符长度
    readonly:只读(只需要写属性名即可)-->
    用户名:<input type="text" name="username" value="tom"
               placeholder="请输入用户名" maxlength="5" readonly><br>
    <!--密码框的属性和文本框通用-->
    密码:<input type="password" placeholder="请输入密码" name="password"><br>
    <!--单选框 value属性必须写否则提交的是on
    checked设置默认选中-->
    性别:<input type="radio" name="gender" value="m">男
    <input type="radio" name="gender" checked value="w">女<br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    <!--日期选择器-->
    生日:<input type="date" name="birthday"><br>
    <!--文件选择器-->
    靓照:<input type="file" name="pic"><br>
    <!--下拉选  select选择   option选项-->
    所在地:<select name="city">
    <!--value设置提交内容-->
        <option value="bj">北京</option>
        <option selected>上海</option>
        <option>广州</option>
    </select><br>
    <input type="submit" value="注册">
    <input type="reset">
    <!--自定义按钮-->
    <input type="button" value="自定义按钮">
    <button type="submit">注册</button>
    <button type="reset">重置</button>
    <button type="button">自定义按钮</button>

</form>
```

### CSS

- Cascading Style Sheet:层叠样式表

- 层叠样式表, 作用:美化页面,  相当于装修
- 通过CSS样式相关代码对页面进行美化 

### 如何在html页面中添加css样式代码

- 三种添加方式(引入方式) 
  - 内联: 在标签的style属性中添加样式代码, 不能复用
  - 内部: 在head标签里面添加style标签, 标签体内写样式代码, 可以复用,但不能多页面复用
  - 外部: 在单独的css样式文件中写样式代码,在html页面中通过link标签引入,可以实现多页面复用, 而且可以将html代码和css样式代码分离开 便于维护

### 选择器

- 作用: 通过选择器找到页面中的元素, 找到后再添加样式代码

1. 标签名选择器, 匹配页面中所有同名标签

   格式: 标签名{样式代码}

2. id选择器:  当需要选择页面中某一个元素时使用

   格式:#id{样式代码}

3. 类选择器: 当需要选择多个不相干的元素的时使用

   格式:.class{样式代码}

4. 分组选择器: 将多个选择器合并成一个选择器

   格式: div,#id,.class{样式代码}

5. 属性选择器:通过元素的属性选择元素

   格式:标签名[属性名='值']{样式代码}

6. 任意元素选择器:匹配所有元素

   格式:*{样式代码}

7. 子孙后代选择器: 通过元素之间的层级关系选择元素

   格式:body div div p{样式代码}   匹配的是body里面的div里面的div里面的所有p(包含后代)

8. 子元素选择器:通过元素之间的层级关系选择元素

   格式:body>div>div>p{样式代码}   匹配的是body里面的div里面的div里面的所有p子元素(不包含后代)

9. 伪类选择器: 选择的是元素的状态,包括:未访问,访问过,悬停,点击

​        格式: a:link未访问/visited访问过/hover悬停/active点击或激活{样式代码}

### 颜色赋值

- 三原色: 红绿蓝   RGB   RedGreenBlue  ,    每个颜色的取值范围0-255      
- 五种颜色赋值方式:
  - 颜色单词赋值:   red/pink/yellow/green....
  - 6位16进制赋值:  #ff0000     
  - 3位16进制赋值: #f00
  - 3位10进制赋值: rgb(255,0,0)
  - 4位10进制赋值: rgba(255,0,0,0-1)      a=alpha 代表透明度  值越小越透明

### 背景图片

- background-image:url("路径"); 设置背景图片
- background-size:200px 300px;设置背景图片的尺寸
- background-repeat:no-repeat; 禁止重复
- background-position: 横向偏移值  纵向偏移值;  设置背景图片的位置

### 文本和字体相关样式

- text-align:left/right/center;  设置水平对齐方式
- text-decoration:overline/underline/line-through/none; 文本修饰 
- line-height:20px; 设置行高, 多行控制行间距, 单行控制垂直居中
- text-shadow:颜色 x偏移值 y偏移值 模糊度;  设置文本阴影
- font-size:20px; 设置字体大小
- color:red; 设置字体颜色
- font-weight:normal/bold; 设置加粗 和去掉加粗
- font-style:italic; 设置斜体 
- font-family:xxx,xxx,xxx,xxx;设置字体 
- font: 20px xxx,xxx,xxx;  设置字体大小+字体

### 元素的显示方式display

- block: 块级元素, 特点: 独占一行,可以修改元素宽高,   包括: div,p,h1-h6
- inline: 行内元素, 特点: 共占一行,不能修改元素宽高,  包括: span,a,b,i,u,s
- inline-block:行内块元素,特点: 共占一行,可以修改元素宽高, 包括: input,img
- none: 隐藏元素

如果行内元素需要修改宽高,可以将显示方式改成块级元素或行内块元素

### 盒子模型

- 盒子模型 = content内容+margin外边距+border边框+padding内边距   
- 作用:控制元素的显示效果
  - content内容:控制元素的显示尺寸
  - margin外边距: 控制元素的显示位置
  - border边框: 控制边框效果
  - padding内边距: 控制元素内容的位置

### 盒子模型之content内容

- 包含width和height , 通过这两个样式设置元素的显示尺寸
- 赋值方式:
  - 像素
  - 上级元素的百分比 
- 行内元素不能直接修改宽高,如果需要修改宽高,可以将显示方式改成块级元素或行内块元素

### 盒子模型之margin外边距

- 作用:控制元素的显示位置
- 元素距上级元素或相邻兄弟元素的距离称为外边距
- 赋值方式:
  - margin-left/right/top/bottom:10px; 单独某一个方向赋值
  - margin:50px;  四个方向赋值
  - margin:10px 20px; 上下10  左右20  ,   居中:   0 auto
  - margin:10px 20px 30px 40px; 上右下左  顺时针赋值
- 行内元素上下外边距无效
- 上下相邻彼此添加外边距取最大值,  左右相邻两个值相加  
- 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决

### 盒子模型之border边框

- 赋值方式:  

  - border:粗细 样式 颜色;       四个方向添加边框
  - border-left/right/top/bottom:粗细 样式 颜色;   单独某个方向添加边框    

  

  下图是边框的样式

  

- 圆角:  border-radius:20px;    值越大越圆, 超过宽高的一半为正圆

### 盒子模型之padding内边距

- 作用: 控制元素内容的位置 

- 赋值方式:(和外边距类似)

  - padding-left/right/top/bottom:10px:单独某个方向赋值
  - padding:10px; 四个方向赋值
  - padding:10px 20px; 上下10 左右20
  - padding:10px 20px 30px 40px; 上右下左 顺时针赋值

- 默认情况下给元素添加内边距会影响元素的宽高,  添加以下样式后则不再影响

  box-sizing:border-box;   

### 部分标签自带外边距或内边距

- 外边距:     body自带四个方向的外边距 , h1-h6自带上下外边距, p标签自带上下外边距, 列表标签自带上下外边距
- 内边距:   列表标签自带内边距