web学习笔记1 - html基础

html基础自学总结
封面画师：唏嘘的星辰 p站ID：13312138

前端技术概括：

HTML/CSS
JavaScript
各种脚本库，如：jQuery
Node.js
各种框架，如：Vue, React, 小程序、uniapp

web应用开发流程（仅作了解）

合理安排人员(项目经理，产品经理、UI设计师（美工），后端，前端，测试人员)
沟通了解需求（角色一般是产品经理或项目经理，主要了解做什么，谁做，何时做，为什么做的问题）
需求分析（角色一般是项目经理，解决怎样做，成本工期效率等问题）
项目设计（角色一般是UI设计师和后端，UI设计师进行界面设计，后端进行数据库设计）
项目开发（使用各种工具开始动手编码）
项目测试（测试人员使用各种测试工具测试代码，发现BUG，提交给开发人员）
运行维护（开发人员根据测试结果，维护代码，真至项目完美）

详细文档：
https://www.cnblogs.com/ceshi2016/p/9212749.html

浏览器从输入URL到渲染完页面过程:

DNS解析URL的过程
把IP地址解析成容易记忆的域名。
如：220.181.38.150 -> www.baidu.com
浏览器与服务器交互过程
浏览器通过三次握手和服务器进行交互
浏览器页面渲染过程
当html被加载到浏览器中，解析html构建dom tree，通过link解析css，构建render tree。把这俩个组合在一起，渲染出看到的页面

参考文档:
https://www.cnblogs.com/qing-5/p/11126524.html

语义化标签：

html5建议程序员多去使用语义化标签，有助于seo搜索引擎进行搜索，但是目前语义花标签不太普及

语义化标签：
- main 内容区域
- address 地址
- footer 页尾
- video 视频
- audio 音频
- strong 加粗
- b 加粗
- i 倾斜
- del 删除
- sub 下标
- sup 上标

语义化标签的作用:

<b>加粗</b>
<i>倾斜</i>
<span style="text-decoration: line-through;">我是使用css实现的删除线！</span>
<del>语义化删除线</del>

加粗
倾斜
我是使用css实现的删除线！
~~语义化删除线~~

锚点 a进行页面内的跳转
a实现页面内的跳转通过a标签的href的属性设置对应的元素id，可以把对应的元素的显示页面上边
点我回到语义化标签！
```
<a href="#语义化标签：">点我回到<b style="color: #000">语义化标签</b>！</a>
```

From表单

form 表单 action属性：提交数据的目标一般是接口地址
mehtod:提交的方式：get：获取服务器数据，post：提交数据到服务器。
目前暂且作为了解

for属性点击用户名输入框获取焦点
autocomplete on 开启自动填充账号，off关闭
maxlength 输入最大长度
minlength 输入最小长度
name 会把name属性的内容提交到服务器，格式位 username=xxxx，passwd=xxxx

<label for="i1">用户名</label>
<input type="text" placeholder="请输入用户名" id="i1" autocomplete="on"  maxlength="9" minlength="1" name="username">
<label for="i2">密码</label>
<input type="password" placeholder="请输入密码" id="i2" autocomplete="on"  maxlength="9" minlength="1" name="password">

用户名密码

From表单内部常用元素

多选 name属性证明多选是一组

<input type="checkbox" name="n1"> 打篮球
<input type="checkbox" name="n1"> 敲代码
<input type="checkbox" name="n1"> 写代码

打篮球
敲代码
写代码

下拉菜单美化select value属性可以省掉，默认值值option的内容

<select name="n2" id="">
  <option>河南</option>
  <option>河北</option>
  <option>山西</option>
</select>

optgroup 分组 label分组名

<select name="n3" id="">
<optgroup label="河南">
    <option value="1">郑州</option>
    <option value="2">开封</option>
    <option value="3">洛阳</option>
</optgroup>
<optgroup label="河北">
    <option>唐山</option>
    <option >北京</option>
    <option >天津</option>
</optgroup>
</select>

单选框 name属性代表相同name是一个小组，用在多选或者单选
```
<input type="radio"  name="sex">男
<input type="radio"  name="sex">女
```
男
女
普通按钮没有提交功能页面不会刷新
```
<input type="button" value="按钮">
```
提交按钮默认有提交功能点击提交按钮页面会刷新
```
<input type="submit" value="提交按钮"> 提交到服务器
```
提交到服务器
重置按钮把输入框的输入内容清空掉
```
<input type="reset" value="重置按钮">
```
disabled 禁止标签可用
```
<button disabled>普通按钮</button>
```

提交按钮

<button type="submit">提交按钮</button>

重置按钮

<button type="reset">重置按钮</button>

表格

table 表格 (一般使用在后台管理系统项目类型上建议大家尽量不要使用table)
tr 代表行
td 代表单元格

<table>
  <tr>
    <!-- colspan 合并列 -->
    <!-- rowspan 合并行 -->
    <td rowspan="3">第1项</td>
    <td>第2项</td>
    <td rowspan="2">第3项</td>
  </tr>
  <tr>
    <!-- <td>第1项</td> -->
    <td>第2项</td>
    <!-- <td>第3项</td> -->
  </tr>
  <tr>
    <!-- <td>第1项</td> -->
    <td colspan="2">第2项</td>
    <!-- <td>第3项</td> -->
  </tr>
</table>

第1项	第2项	第3项
	第2项
	第2项

老的表格写法： thead 表头 th：表头标题加粗效果

以下特殊的标签不能加其他子元素比如 table下只能加tr tr下只能加td，ul下只能li

<table>
  <thead>
    <th>姓名</th>
    <th>年龄</th>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

姓名	年龄
张三	18
张三	18

边框倒三角

#d2{
  border: 1px solid red;
  width: 100px;
  height: 100px;
  /* 网页的安全区域：顶宽居中 */
  margin: 200px auto;
  border-top-width: 0px;
  border-right: none;
  /* 变换 rotate旋转 deg度  如果正值旋转顺时针 ，负值逆时针 */
  transform: rotate(135deg);
}
#d3{
  /* 
  倒三角
  1 设置 width heigh 为 0
  2 设置4个方向上的边框的宽度
  3 把其他三个方向上边框设置成透明颜色，只留一个边框的颜色
  */
  width: 0;
  height: 0;
  border: 10px  solid;
  border-color: transparent transparent red transparent;
}

效果：

定位

relative

相对定位自身的位置

absolute

绝对定位以他非静态定位祖先元素为参照，

fixed

固定定位参照物以html为参照物的

static

静态定位不设置定位默认的就是静态定位

sticky

粘性定位滚动一定位置之后再去固定位置，样式是属于一个新的样式，部分浏览器兼容性不好，需要时直接用js写

z-codeing

E

元素名称(div, p);

E#id

使用id的元素(div#content, p#intro, span#error);

E.class

使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;

E>N

子代元素(div>p, div#footer>p>span);

E+N

兄弟元素(h1+p, div#header+div#content+div#footer);

E*N

元素倍增(ul#nav>li*5>a);

E$*N

条目编号 (ul#nav>li.item-$*5);

符号关系：

> 父子关系
+ 兄弟关系
$ 是顺序
{} 表示内容
. 类
# id
用法：table>tr*3>td{第$项}*3