Web前端编程学习

Web前端编程学习

---

HTMl部分

2021.1.11  P1 - P8

一、标签学习

1. 编写工具：HbuilderX
2. <!DOCTYPE   >  <!-- ...-->  :  注释
3. <h1>  标题  </h1>  ：  h1 - h6 从大到小  1-6级标签
4. <i> 斜体 </i>
5. <hr >  :  分割线（单标签）
6. <p> 换行 </p>
7. <b>加粗</b>
8. <br> : 换行 （单标签）
9. &nbsp;   :  空格
10. <img src="               ">   ： 插入图片
    1. <img src="               " title = "鼠标放上去显示的文字">
    2. <img src="               " alt = "图片加载不出来显示的文字">
11. <ul>  </ul>无序列表项
    1. <ul  type = "disc">  </ul>   (实心圆，默认样式）
    2. <ul  type = "circle">  </ul>   (空心圆）
    3. <ul  type = "square">  </ul>   (实心方块）
12. <ol>  </ol>有序列表项
    1. <ol type = " 1 ">  </ol> (阿拉伯数字，默认样式）
    2. <ol type = " A ">  </ol> (大写英文字母）
    3. <ol type = " a ">  </ol> (小写英文字母）
    4. <ol type = "Ⅰ">  </ol> (大写罗马字母，默认样式）
    5. <ol type = " i ">  </ol> (小写罗马字母，默认样式）
13. <li>列表项</li>
14. <a href = " 链接 "> 标题 < /a>   ：超链接   
    1. <a href = " 链接 "  target = "_blank"> 标题 < /a>  （新标签页打开）
    2. <a href = " 链接 "  > 标题 < /a>  （当前标签页打开）
15. <del> 删除线 </del>
16. ^右上角标
17. <u> 下划线 </u>
18. <center> 居中 < /center>

 

 

二、图片的使用

1. width : 宽度  eg：100px   or   100%
   1. eg <img src="               " width = 100px>
2. height : 高度  eg：100px   or   100%
   1. <img src="               " height = 100%>
3. 下载图片:    

        

 

 

2021.1.12 P9 - P14

三、绝对路径和相对路径

1.   ../返回上级目录

 

四、单元格

1. <table> </table>
2. <tr>...</tr> :  表示一行
3. <td>...</td> ：表示单元格
4. <col> : 表示一列
5. <table border="1px" cellspacing="0" cellpadding="0"> 
   1. border ：表格边框宽度
   2. cellspacing : 单元格子之间的空白距离
   3. cellpadding ：单元格bai子的内容与du单元格子四边边界之间空白zhi距离
6. <tr align="center">
   1. left​​​​​​​ = 左对齐内容（默认值）。
   2. right = 右对齐内容。
   3. align = 单元格内容的对齐方式
   4. justify = 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。
   5. char = 将内容对准指定字符。
7. <tr height="40px">​​​​​​​
   1. ​​​​​​​height : 单元格高度
8. <td colspan="7" >...</td>
   1. ​​​​​​​colspan : 行合并
9. <td rowspan="4"> ... </td>
   1. rowspan : 列合并
10. <th>...</th> = 加粗并水平居中的<td>...</td>
11. <colgroup span = "6" width="100px>
    1. ​​​​​​​colgroup : 将XX列分为一组，同时修改宽度​​​​​​​

五、标签的嵌套

1. 超链接不能嵌套超链接
2. P标签不能嵌套P标签
3. 标签H1...H6也不能互相嵌套

 

六、表单

1. <form action="..." method="post">
   1. ​​​​​​​form必须有action属性，表示提示地址
2. <form action="..." method="post">  or  <form action="..." method="get">
   1. ​​​​​​​get请求通常表示获取数据
   2. post请求通常表示提交数据
   3. get请求发送的数据都写在地址栏上，用户可见
   4. post请求发送的数据用户不可见
   5. get请求不能提交大量数据，但post可以，因此不能混用
3. <input type="text" name="logitname">
   1. ​​​​​​​所有需要提交的数据，input必须有name属性
4. <input type="submit" value="提交">
   1. ​​​​​​​input按钮的文字用value表示
5. input必须放在form标签内才能提交
6. input常见类型：
   1. ​​​​​​​type = "text" : 文本输入框
   2. ​​​​​​​type = "password"  ： 密码输入框
   3. ​​​​​​​type = "radio" ： 单选框
   4. ​​​​​​​type = "checkbox" ：复选框
   5. ​​​​​​​type = "button" ：普通按钮
   6. ​​​​​​​type = "submit"​ ：提交按钮
   7. ​​​​​​type = "reset" ：重置按钮
   8. ​​​​​​​type = "file" ： 文件选择框

 

CSS部分

一、样式表

1. style：表示风格、样式
   1. ​​​​​​​<input type="submit" value="提交" style="width: 80px; height: 30px; background-color: darkseagreen;">
2. ​​​​​​​text-align: center;  让内部元素水平居中
3. margin：auto； 让元素本身水平居中
4. background-color ：gray； 设定背景颜色
5. font-size：24px；  设定字体大小
6. color： white；设定文字颜色

二、选择器

1. #box：ID选择器
2. .nav：类（别）选择器
3. div：标签选择器
4. *: 通用选择器
5. ​​​​​​​​​​选择器优先级

   1. ​​​​​​​   行内样式表 <...style="...">      >     ID选择器 #box{...}      >      类别选择器  .con{...}     >    标签选择器  div{...}     >    通用选择器 *{...}

三、文本属性

1. colo : red  文字颜色
2. font-famoly : "华文中央" 字体类型
3. font-size :  26 px  字体尺寸
4. font-weight ：bold   文字加粗
5. font-style ：italic ：文字倾斜
6. text-indent ：60px  首行缩进
7. text-align：center 水平对齐
8. line-height ：100px 行高
9. height :100px  ; line-height ：100px; background-color : gray :垂直居中 背景灰色
10. text-decoration ：underline  : 下划线