day01_HTML_CSS

1. B/S与C/S

• B/S指浏览器与服务器之间工作方式

  • 优势：无需占用本地存储空间
  • 不足：所有请求与响应占用大量网络带宽

• C/S指客户端与服务器之间工作方式

  • 优势：无需占用大量网络带宽
  • 不足：需要占用本地存储空间

2. 网页三要素

• 结构【HTML】
• 表现【CSS】
• 行为【JavaScript|jQuery】

3. HTML语法

• HTML整体分为两类标签，一类叫有开始有结束标签【成对标签】，另一类叫自结束标签
• HTML不区分大小写
• HTML标签可以嵌套，但不能交叉嵌套
• HTML标签必须正确关闭
• HTML标签属性必须有值，且用双引号括起来
• HTML注释不能嵌套

4. HTML常用标签

• 标题标签

  • 语法：
    -

  • 作用：标题
  • 特点：自带换2行效果

• 换行标签

  • 语法：
    或
    
  • 作用：换行

• 分区布局标签

  1. div

     • 语法：
     • 作用：div本身无实际语义，主要用于分区布局。
     • 特点：自带换1行效果【块级元素】

  2. span

     • 语法：
     • 作用：span本身无实际语义，主要用于分区布局。
     • 特点：不自带换行效果【内联元素】

• 段落标签

  • 语法：

  • 作用：区分段落
  • 特点：自带换2行效果

• 实体字符【转义字符】

  • 语法：以&开头，以;结尾

  • 常用字符如下

    • 空格：   【中文空格】
    • 大于号：>
    • 小于号：<
    • 版权号：©

• 分割线

  • 语法：

    ---

  • 作用：分隔

5. HTML重点标签

• 插入图片

  • 语法：

  • 属性：

    • src：设置插入图片路径
    • title：设置【鼠标移入时】文本提示
    • alt：设置【当图片路径有误时】文本提示

• 关于路径

  • 相对路径：相对当前文件路径，进行查找目标路径。

    • 如目标文件与当前文件，在同一目标下，可以直接查找使用。

    • 如目标文件与当前文件，不在同一目标下

      • 先找目标文件的上一级目录，再找目标文件
      • 如目标文件与当前文件也不在同一目录，最终基于当前项目进行查找。
    • ./：当前目录
    • ../：当前目录的上一级目录
  • 绝对路径：基于服务下的某种特定路径【http://192.168.x.x/staticpro_1021】
  • 真实路径：基于本地盘符路径【D:/dir/xxx】

• 超链接

  • 语法：文本

  • 属性

    • href：设置链接路径

    • target：设置链接目录路径方式【_self或_blank】

      • _self【默认值】：以当前选项卡打开，目录路径
      • _blank：以新选项卡打开，目标路径

6. HTML重点标签-列表

• 无序列表

  • 语法：

  • 列表类型：type属性值

    • disc【默认值】：实心圆形
    • square：实心方形
    • circle：空心圆形

• 有序列表

  • 语法
    1. 列表类型：type属性值

       • 1
       • a|A
       • i|I

• 自定义列表

  • 语法：

7. HTML中表格

• 语法

  • 使用| 定义单元格，使用定义表头 | | —- |

• 表格跨行跨列

  • colspan：跨列
  • rowspan：跨行
• 代码

  <table border="1" width="700px" height="500px" align="center">
      <tr>
         <th>表头1</th>
         <th>表头2</th>
         <th>表头3</th>
         <th>表头4</th>
         <th>表头5</th>
      </tr>
      <tr align="center">
         <td colspan="2">2122</td>
  <!--         <td>22</td>-->
         <td>23</td>
         <td>24</td>
         <td rowspan="2">2535</td>
      </tr>
      <tr align="center">
         <td>31</td>
         <td>32</td>
         <td>33</td>
         <td>34</td>
  <!--         <td>35</td>-->
      </tr>
      <tr align="center">
         <td>41</td>
         <td rowspan="2" colspan="3">424344525354</td>
  <!--         <td>43</td>-->
  <!--         <td>44</td>-->
         <td>45</td>
      </tr>
      <tr align="center">
         <td>51</td>
  <!--         <td>52</td>-->
  <!--         <td>53</td>-->
  <!--         <td>54</td>-->
         <td>55</td>
      </tr>
   </table>

8. HTML中表单

• 语法：使用

  定义表单，使用、、、定义表单项</p> </li><li><p>属性：</p> <ul> <li>action：设置表单提交路径</li><li>method：设置表单提交方式【get|post】</li></ul> </li><li><p>表单项</p> <ul> <li><p>input表单项：<input type="" name="" value=""></p> <ul> <li><p>type：设置表单项类型</p> <ul> <li>text：单行文本框</li><li>password：密码框</li><li>redio：单选按钮</li><li>checkbox：复选框【多选按钮】</li><li>submit：提交按钮</li><li>reset：重置按钮</li><li>hidden：隐藏域</li><li>file：文件域【文件上传】</li></ul> </li><li>name：设置表单项名称</li><li>value：设置表单项数值</li><li>checked：设置单选框和复选框默认选中</li></ul> </li><li><p>下拉列表<select><option></option></select></p> <ul> <li>selected：设置下拉框默认选中</li></ul> </li><li></li></ul> </li><li><p>注意：</p> <ol> <li>如表单项需要提交数据时，必须指定当前表单项的name属性值</li><li><p>在设置表单项value属性时，</p> <ul> <li>如设置文本框和密码框，设置value属性值时是：默认值</li><li>如设置submit等按钮时，设置value属性值时是：按钮的文本值</li></ul> </li><li>如需将单选框或复选框【多选框】设置为一组时【实现单选效果】，需要设置name属性值一致即可。</li><li>一般情况：使用单选框或复选框时，需要设置value属性值作为数据</li><li>如未指定下拉框【下拉列表】的value属性值时，默认将文本值作为value属性值。</li></ol> </li></ul> <p><a name="705cfadb"></a></p> <h3 id="1n2m7k"><a name="1n2m7k" class="reference-link"></a><span class="header-link octicon octicon-link"></span>9. CSS</h3><ul> <li><p>CSS简介</p> <ul> <li>CSS全称为“层叠样式表 (Cascading Style Sheets)”</li><li>CSS作用：主要用于美化HTML页面，如：文字大小、颜色、字体、边框、位置等。</li></ul> </li><li><p>CSS使用</p> <ul> <li><p>CSS格式</p> <ul> <li><strong>选择器 {</strong> <br /> <strong>样式名：样式值;</strong> <br /> <strong>样式名：样式值;</strong> <br /> <strong>…………</strong> <br /><strong>}</strong></li></ul> </li><li><p>示例代码</p> <pre><code class="lang-css"><style type="text/css"> p{ color: blue; font-size: 36px; } </style> </code></pre> </li></ul> </li></ul> <ul> <li><p>CSS嵌入方式【书写位置】</p> <ol> <li><p>行内样式表【不推荐使用】</p> <ul> <li><pre><code class="lang-html"><p style="color: red;">第一段落</p> </code></pre> </li></ul> </li></ol> </li></ul> <ol> <li><p>内部样式表【少量使用】</p> <ul> <li>书写在</li></ul> </li></ol>