前端基础之html与css学习

1.html

HTML 指的是超文本标记语言，标记：就是标签 <标签名称></标签名称>

1. 所谓超文本，有两层含义：

   1. 因为网页中还可以有图片，视频，音频，等内容（超越文本限制）
   2. 它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接（超链接文本）

2. html 作用： 用来开发网页的，是开发网页的语言

3. html 基本结构 文档声明–html文档（页头–页身）

   1. 第一行，《!DOCTYPE html》 是文档声明，用来指定页面所使用的html版本，这里声明的是一个html5的文档
   2. 《html》…《/html》 标签是开发人员在告诉浏览器。整个网页是从《html》这里开始的，到《/html》结束，也就是html文档的开始和结束标签
   3. 《head》…《/head》标签用于定义文档的头部，是负责对网页进行设置标题，编码格式以及引入css和js文件的
   4. 《body》…《/body》标签是编写网页上显示的内容

4. 网页文件

   1. 后缀为 .html 或者 .htm 的文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页

5. 标签：

   1. 标签不分大小写，但推荐使用小写
   2. 根据标签的书写形式，标签分为双标签与单标签（空标签）
      1. 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如：div
      2. 单标签是一个标签组成，没有标签内容，比如： img标签

6. 资源路径

   1. 资源路径分为 相对路径 与 绝对路径
   2. 相对路径 从当前操作的html 的文档所在目录算起的路径叫 相对路径
   3. 绝对路径 从根目录算起的路径
   4. 资源路径一般采用相对路径，绝对路径会出现资源找不到的问题

7. 列表标签

   1. 无序列表标签(ul)

  <!-- 无序列表标签 -->
    <ul>
        <li>水果</li>
        <li>蔬菜</li>
        <li>零食</li>
    </ul>

		3.  有序列表标签（ol）

   <!-- 有序列表标签 -->
    <ol>
        <li>衣服</li>
        <li>帽子</li>
        <li>房子</li>
    </ol>

8. 表格标签
   1. 表格由行和列组成，好比一个excel文件
   2. 表格标签
      3. 《tagle》 表示一个表格
      4. 《tr》 表示表格中的一行
      5. 《td》 表示表格中的列
      6. 《th》 表示表格中的表头

<!-- 表格 -->
    <table style='border: 1px solid black;'>
        <tr><!--行-->
            <!--border 实线 1 像素粗 颜色 黑 border-collapse:collapse 边框合并-->
            <th style='border: 1px solid black;border-collapse:collapse'>姓名</th><!--表头-->
            <th style='border: 1px solid black;'>年龄</th><!--列-->        
        </tr>
        <tr>
            <td style='border: 1px solid black;'>张三</td>
            <td style='border: 1px solid black;'>33</td>
        </tr>

    </table>

9. 表单标签
   1. 表单用于搜集不同类型的用户输入（用户输入的数据），然后可以把用户数据提交到web服务器
   2. 相关标签
      1. 《form》表示表单标签，定义整体的表单区域
      2. 《label》表示表单元素的文字标注标签，定义文字标注
      3. 《input》表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
      4. type属性
         1. type =‘text’ 定义单行文本输入框
         2. type=‘password’ 定义密码输入框
         3. type=‘radio’ 定义单选框
         4. type=‘checkbox’ 定义复选框
         5. type=‘file’ 定义上传的文件
         6. type =‘submit’ 定义提交按钮
         7. type=‘reset’ 定义重置按钮
      5. 《textarea》标签 表示表单元素的多行文本输入框标签 定义多行文本输入框
      6. 《select》 标签 表示表单元素的下拉列表标签 定义下拉列表
         1. 《option》 标签 与《select》标签配合使用，定义下拉列表中的选项

<!--表单标签 把数据提交给web 服务器-->  
  <form action="">
      <!-- for 根据id名给指定id的标签设置光标 -->
    <label for="name">用户名：</label><input type="text" id="name"><br>
    <label >密  码：</label><input type="password"><br>
    <label >性  别：</label><input type="radio">男<input type="radio">女<br>
    <label >爱  好：</label><input type="checkbox">学习<input type="checkbox">看书<br>
    <label >照  片：</label><input type="file"><br>
    <label >个人描述</label><br>
    <textarea name="" id="" cols="30" rows="2"></textarea><br>
    <label >籍贯</label><select >
        <option >北京</option><option >上海</option><option>天津</option>
    </select>
    <br>
    <input type="submit" value='提交'>
    <input type="reset",value='重置'>
    <input type="button" value='按钮'>
    </form>

<!--表单标签 把数据提交给web 服务器 及表单提交-->  
  <form action="https://www.baidu.com" method='GET'>
      <!-- for 根据id名给指定id的标签设置光标 -->
      <!-- get的方式提交到web 服务器 以地址栏的方式提交服务器 不安全，能看到提交的数据 -->
        <!-- 严格的说是以查询参数的方式提交给web服务器 -->
        <!-- post方式提交的数据会放到请求体里面 -->
        <!-- get和post 方式提交表单数据都会以http协议的方式提交数据给web服务器 -->
    <label for="name">用户名：</label><input type="text" id="name" name='username'><br>
    <label >密  码：</label><input type="password" name='password'><br>
    <label >性  别：</label><input type="radio" name='sex' value='0'>男<input type="radio" name='sex' value='1'>女<br>
    <label >爱  好：</label><input type="checkbox" name='love',value='学习'>学习<input type="checkbox" name='love' vlaue='看书'>看书<br>
    <label >照  片：</label><input type="file" name='pic'><br>
    <label >个人描述</label><br>
    <textarea name="desc" cols="30" rows="2"></textarea><br>
    <label >籍贯</label>
    <select name='position'>
        <option value='北京'>北京</option><option value='上海' >上海</option><option vaule='天津'>天津</option>
    </select>
    <br>
    <input type="submit" value='提交'>
    <input type="reset",value='重置'>
    <input type="button" value='按钮'>
    </form>

---

• 走过疾风暴雨，看尽人间疾苦