python学习笔记-前端基础-html

作者: MR_詹 | 来源:发表于2020-10-16 22:10 被阅读0次

HTML基础学习笔记
web前端入门基础
python学习笔记-前端基础-html
2018-01-04
常用标签&选择器
前后端学习教程汇总
前端开发都需要学什么？
pytest框架学习-基础入门
【1Day】Joshua—初识html+css学习笔记（1）
学习前端需要掌握什么基础？

<head>...</head>标签用于定义文档的头部，是负责对网页进行设置标题、编码格式以及引入css和js文件的
<body>...</body> 标签是编写网页上显示的内容

<!-- 文档声明：html5的文档 -->
<!DOCTYPE html>
<!-- 当前网页的语言是英文 默认不指定是中文 lang="zh "-->
<html lang="en">
<head>
    <!-- 指定网页的编码格式 -->
    <meta charset="UTF-8">
    <!-- 在移动设备浏览网页时，网页不缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

VSCode中编写Html程序，在默认浏览器打开，快捷键：alt + b
在其他浏览器中打开，快捷键：shift + alt + b

修改VSCode的默认浏览器

设置VSCode代码自动保存

    <!-- 成对标签 -->
    <h1>h1标题</h1>
    <div>这是一个div标签</div>
    <p>这是一个段落标签</p>

    <!-- 单个出现的标签 -->
    <br>
    <img src="images/pic.jpg" alt="图片">
    <hr>

    <!-- 带属性的标签 -->
    <img src="images/pic.jpg" alt="图片">
    <a href="https://wwww.baidu.com">百度网</a>

    <!-- 标签的嵌套 -->
    <div>
        <img src="images/pic.jpb" alt="图片">
        <a href="https://www.baidu.com">百度网</a>
    </div>

列表标签

<ul>
  <li>无序</li>
  <li>无序</li>
</ul>

<ol>
  <li>有序</li>
  <li>有序</li>
</ol>

表格标签

表格由行和列组成
<table> 标签：表示一个表格
<tr>标签：表示表格中的一行
<td>标签：表示表格中的列
<th>标签：表示表格中的表头

<table>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>0</td>
        <td>张三</td>
        <td>18</td>
    </tr>
</table>

表单

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器

<form> 标签 表示表单标签，定义整体的表单区域
<label> 标签 表示表单元素的文字标注标签，定于文字标注
<input> 标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式

<input> 标签 数据type
  * type = "text" 定义单行文本输入框
  * type = ”password“ 定义密码输入框
  * type = "radio" 定义单选框
  * type = ”checkbox“ 定义复选框
  * type = "file" 定义上传文件
  * type = "submit" 定义提交按钮
  * type = ”reset“ 定义重置按钮
  * type = "button" 定义一个普通按钮
  
<textarea> 标签 表示表单元素的多行文本输入框标签 定义多行文本输入框

<select> 标签 表示表单元素的下拉列表标签，定义下拉列表
<option> 标签 与 <select> 标签配合，定义下拉列表中的选项

表单属性设置
action 属性：设置表单提交数据的地址
methond 属性：设置表单提交的方式，一般的有”GET“和”POST“方式，不区分大小写

表单元素数据设置
name属性：设置表单元素的名称，该名称是提交数据时的参数名
value属性：设置表单元素的值，该值是提交数据时参数名所对应的值

# 例如：提交数据到百度

<body>
    <!-- 把数据提交到web服务器需要使用表单标签 -->
    <form action="https://www.baidu.com" method="GET">
        <p>
            <!-- for 根据id名给指定id的标签设置为第一响应者 -->
            <!-- 也就是说点击用户名之后，对应的输入框会变成第一响应者 -->
            <label for="name">用户名：</label>
            <input type="text" id="name" name="username">
        </p>
        <p>
            <label>密码：</label>
            <input type="password" name="password">
        </p>
        <p>
            <!-- 单选 -->
            <label for="">性别：</label>
            <input type="radio" name="sex" value="0">男
            <input type="radio" name="sex" value="1">女
        </p>
        <p>
            <!-- 多选 -->
            <label for="">爱好：</label>
            <input type="checkbox" name="like" value="lanqiu">篮球
            <input type="checkbox" name="like" value="zuqiu">足球
            <input type="checkbox" name="like" value="wangqiu">网球
        </p>
        <p>
            <!-- 文件选择 -->
            <label for="">照片：</label>
            <input type="file" name="pic">
        </p>
        <p>
            <!-- 多行输入框 -->
            <label for="">描述：</label>
            <textarea name="desc" rows="10"></textarea>
        </p>
        <p>
            <!-- 选项 -->
            <label for="">籍贯：</label>
            <select name="site" id="">
                <option value="gz">广州</option>
                <option value="sz">深圳</option>
                <option value="zh">珠海</option>
                <option value="st">汕头</option>
            </select>
        </p>

        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="按钮">
        </p>
        
    </form>

</body>