美文网首页
python学习笔记-前端基础-html

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

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

<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代码自动保存

标签

  1. 标签是不区分大小写的,但是推荐使用小写

2.根据标签的书写形式,标签分为双标签(闭合标签)和单标签(空标签)

    <!-- 成对标签 -->
    <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>

相关文章

  • HTML基础学习笔记

    原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...

  • web前端入门基础

    web前端基础笔记 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了...

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

    ... 标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的 ... 标签是编写...

  • 2018-01-04

    Web学习笔记--从最基础的开始 一、web前端开发语言: HTML、 CSS 、JavaScript HTML:...

  • 常用标签&选择器

    本系列是前端基础的学习笔记,只是方便自己学习记忆的。 html、xhtml、xml、html5 一些历史知识而已啦...

  • 前后端学习教程汇总

    前端学习路径教程 HTML 基础 HTML基础:https://www.w3school.com.cn/html/...

  • 前端开发都需要学什么?

    初级前端掌握的课程: HTMl5+ CSS3。 前端学习的基础技能需要掌握HTMl+ CSS的基础内容。 学习内容...

  • pytest框架学习-基础入门

    查看所有Python相关学习笔记 pytest学习 一、相关内容的下载安装 1.1 基础安装 1.2 html报告...

  • 【1Day】Joshua—初识html+css学习笔记(1)

    目录学习web前端开发基础技术需要掌握认识html标签标签的语法认识html文件基本结构学习web前端开发基础技术...

  • 学习前端需要掌握什么基础?

    学习前端需要掌握什么基础?前端基础包含HTML、CSS层叠样式表、JavaScript、HTML5、CSS3、jQ...

网友评论

      本文标题:python学习笔记-前端基础-html

      本文链接:https://www.haomeiwen.com/subject/ydsbpktx.html