Python全栈之学习HTML

目录
  • 1. vscode相关配置
  • 2. html认识
    • 2.1 html认识
    • 2.2 html结构
    • 2.3 html语法特征
  • 3. 标签种类_列表
    • 3.1 常见标签
    • 3.2 标签种类
    • 3.3 列表
    • 3.4 超链接标签
    • 3.5 a链接跳锚点
    • 3.6 img图片标签
    • 3.7 table表格标签
    • 3.8 iframe子窗口
  • 4. 音视频_表单
    • 4.1 音视频标签
    • 4.2 form标签
  • 5. 小练习
  • 总结

1. vscode相关配置

w3c school 手册： https://www.w3school.com.cn/html/index.asp

插件安装：
	chinese
	live server（html以服务端的形式进行显示，而不是以文件的形式进行显示）
	icon （文件有图标）
快捷操作：
	ctrl + k   /  ctrl + t  选择主题 light+
	文件 -> 首选项 -> 设置 -> -> 字体 ->
	font-weight setting.json文件中配置
	vscode  1.开发前段写代码速度比较快 2.免费
	选择live server插件 选择齿轮 扩展设置

2. html认识

2.1 html认识

<!--
html :  网页的骨架
css  :  网页的样式
js/jq:  网页的动作
-->
<!DOCTYPE html>  声明文档的类型是html 超文本标记语言
<html>
    <head>
        此处写入web网页的配置信息
    </head>
    <body>
        此处写入网页的主体内容
        <font color="yellow" size=5> 学习html </font>
    </body>
</html>

2.2 html结构

<!DOCTYPE html>
<html>
    <head>
        <!-- 设置编码集 -->
        <meta charset="utf-8" />
        <!-- 设置网站标题 -->
        <title>这是前端内容</title>
        <!-- 设置网站图标 -->
        <!-- http://www.bitbug.net/  制作小图标的网址-->
        <link href="https://g.csdnimg.cn/static/logo/favicon.ico" rel="shortcut icon" />
        <!-- 设置搜索引擎抓取页面的关键字 -->
        <meta name="keywords" content="html再线学习 html课外学习 html线下学习" />
        <!-- 设置搜索引擎抓取页面的描述信息 -->
        <meta name="description" content="html再线学习 css在线学习 js再线学习 前端再线学习" />
        <!-- 设置几秒之后页面跳转 -->
        <!-- <meta http-equiv="refresh" content="3;url=http://www.baidu.com" /> -->
    </head>
    <body>
            <!-- 一个及多个空白符,都会被理解成一个空白符 -->
            1111       3333     343434                   234234
            <!-- 换行标签 -->
            <br />
            5<d   c>10
            <!-- 分割线标签 -->
            <hr />
            字符实体:使用字符实体来表达实际的字符含义;
                &nbsp;  使用字符实体表达多个空格
                例子:
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11111
                <br />
                <  : &lt; 小于号  &gt; 大于号
                例子:
                    5&lt;d     c&gt;10
            <!-- 格式化预览标签 原型化输出所有内容 <pre> -->
            <pre>
            333
           +444
           ------
            777
            </pre>
    </body>
</html>

2.3 html语法特征

1.内容不区分大小写
2.标签结构分为单闭合、双闭合标签(标签成对显示)
3.一个及多个空白符,都会被理解成一个空白符

3. 标签种类_列表

3.1 常见标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> 常见标签 </title>
    </head>
    <body>
        <h1>一级标签</h1>
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>
        <hr />
        <!-- 下角标 sub -->
        h20 => h<sub>2</sub>0
        <br />
        co2 => co<sub>2</sub>
        <br />
        <!-- 上角标 sup -->
        x2 = 100  => x<sup>2</sup> = 100
        <!-- p 是段落标签 -->
        <p>这是第一个段落</p>
        <p>这是第二个段落</p>
        <hr />
        <!-- (了解)逻辑强调 带有语义话的含义 [w3c标准] 推荐-->
        <strong>川普是我的偶像</strong>
        <em>我的爱人</em>
        <!-- (了解)物理强调 带有语义话的含义 [非w3c标准] -->
        <b>川普是我的偶像</b>
        <i>我的爱人</i>
    </body>
</html>

3.2 标签种类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签的种类</title>
</head>
<body>
    <!--
        标签的种类:
            (1) 行内元素标签: 不能独占一行,不能设置宽和高,横向排列
                例子: span a
            (2) 块状元素标签: 独占一行,可以设置宽和高,纵向排列
                例子: div h1~h6 p
            (3) 行内块状标签: 不能独占一行,能设置宽和高,横向排列
                例子: button img input
    span 和 div 都属于无语义化标签,用来布局页面,划分页面结构
    -->
    <!-- 行内元素 -->
    <span style="width:200px;height:200px;background-color:yellowgreen;">我爱你
        <span>奥斯托夫罗斯基</span>
    </span>  111
    <!-- 块状元素 -->
    <div style="width:100%;height:200px;background-color:seagreen;">我是网页的头部</div>
    <div style="width:100%;height:200px;background-color: skyblue;">我是网页的身体</div>
    <div style="width:200px;height:200px;background-color: tan;">我是网页的脚部</div>
    <!-- 行内块状标签 -->
    <button style="width:100px;height:20px;background-color: salmon;">按我1</button>
    <button style="width:100px;height:20px;background-color:sandybrown;">按我2</button>
    <button style="width:100px;height:20px;background-color:seagreen">按我3</button>
</body>
</html>

3.3 列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表 *** -->
    <!-- square 方块 circle 空心圆 -->
    <ul type="square">
        <li>姜子牙</li>
        <li>我和我的家乡</li>
        <li>八百</li>
        <li>唐人街探案3</li>
    </ul>
    <!-- 有序列表 -->
    <!-- type="i" 指定罗马数字 -->
    <ol start=10 type="i">
        <li>姜子牙</li>
        <li>我和我的家乡</li>
        <li>八百</li>
        <li>唐人街探案3</li>
    </ol>
    <!-- 定义列表 -->
    <dl>
        <!-- dt定义标题 -->
        <dt>女生曾经说过的谎言:</dt>
        <!-- dd定义内容 -->
        <dd>不要</dd>
        <dd>你真坏</dd>
        <dd>你是个好人</dd>
        <dd>我给你介绍个漂亮的小姑娘</dd>
    </dl>
</body>
</html>

3.4 超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a 超链接标签</title>
</head>
<body>
    <!--
    GET   - 从服务端请求数据 (可以携带参数来获取数据,参数会暴露在地址栏上,传参大小受浏览器限制,控制在2k~8k范围内,显式传值)
    POST  - 向服务端发送数据 (发送数据时候不限制发送数据的大小,隐式传值)
    -->
    <!-- target="_self" 代表本页面跳转 target="_blank" 新窗口跳转 -->
    <a href="./2.html" target="_self">点我1</a>
    <a href="http://www.baidu.com" target="_blank">点我2</a>
    <a href="http://www.baidu.com/s?wd=王文" target="_blank">点我3</a>
    <a href="./2.html?a=1&b=2&c=3&d=4" target="_blank">点我4</a> <!--地址栏传值 -> get显式传值-->
    <!-- 刷新页面 -->
    <a href="">点5</a>
    <!-- 不刷新页面 -->
    <a href="#">点6</a>
    <!-- 把数据扔到a连接中的href属性中 , 默认下载操作 -->
    <a href="VSCodeUserSetup-x64-1.51.0.exe">点7</a>
</body>
</html>

3.5 a链接跳锚点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> a链接 跳锚点 </title>
</head>
<body>
    <ul>
        <li><a href="#a1">第一章</a></li>
        <li><a href="#a2">第二章</a></li>
        <li><a href="#a3">第三章</a></li>
    </ul>
    <a id="a1">第一章内容</a>
    <p style="width:500px;height:1000px;background-color: silver;">孙悟空三打白骨精</p>
    <a id="a2">第二章内容</a>
    <p style="width:500px;height:1000px;background-color:skyblue;">孙悟空怒锤红孩儿</p>
    <a id="a3">第三章内容</a>
    <p style="width:500px;height:1000px;background-color:tan;">孙悟空大闹凌霄殿</p>
    <a href="#">回到顶部</a>
</body>
</html>

3.6 img图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>img 图片标签</title>
</head>
<body>
    <!-- img 单独调整width或者height可以随着比例进行缩放,如果同时指定有可能失真;  title属性设置图片的提示功能 -->
    <a href="https://baike.baidu.com/item/%E5%91%A8%E6%98%9F%E9%A9%B0/169917?fr=aladdin">
        <img src="zhouxingchi1.jpg" width="200px" height="200px;" title="周星驰" />
    </a>
    <img src="zhouxingchi1.jpg" width="200px" height="200px;" />
</body>
</html>

3.7 table表格标签

表格标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> table 表格标签</title>
</head>
<body>
    <!--
    ### part1
    table 表格  border 表框 width 宽度设置
    tr 表示一行
    th 表示标题加粗
    td 表示一个单元格
    -->
    <table border=1 width="1000px;">
        <thead style="background-color: tan;">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>薪水</th>
                <th>部门</th>
            </tr>
        </thead>
        <tbody style="background-color: teal;">
            <tr>
                <td>王文</td>
                <td>18</td>
                <td>10万</td>
                <td>python</td>
            </tr>
            <tr>
                <td>王伟</td>
                <td>20</td>
                <td>11美元</td>
                <td>开发部门</td>
            </tr>
            <tr>
                <td>王致和</td>
                <td>22</td>
                <td>100万</td>
                <td>臭豆腐研发部门</td>
            </tr>
        </tbody>
        <tfoot style="background-color: thistle;">
            <tr>
                <td>lianxi1</td>
                <td>lianxi2</td>
                <td>lianxi3</td>
                <td>lianxi4</td>
            </tr>
        </tfoot>
    </table>
    <hr  style="width:20px;height:100px;"/>
    <!--
        colspan  横向合并
        rowspan 纵向合并
    -->
    <table border=1 width="1000px;">
        <thead style="background-color: tan;">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>薪水</th>
                <th>部门</th>
            </tr>
        </thead>
        <tbody style="background-color: teal;">
        <tr>
            <td colspan=2>123</td>
            <td>10万</td>
            <td rowspan="3">销售</td>
        </tr>
        <tr>
            <td>王伟</td>
            <td>20</td>
            <td>11美元</td>
        </tr>
        <tr>
            <td>王致和</td>
            <td>22</td>
            <td>100万</td>
        </tr>
        </tbody>
        <tfoot style="background-color: thistle;">
            <tr>
                <td  colspan=4>lianxi1</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表格的方向属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table 表格的方向属性</title>
</head>
<body>
    <!--
    水平方向设置 align : left center right
    垂直方向设置 valign: top middle bottom
    cellspacing td 与td 之间的间距
    cellpadding td 与其中内容之间的间距
    -->
    <table border=1 width="1000px;" height="200px;" cellspacing = "10" cellpadding="10">
        <tr align="center" valign="top">
            <td>王致和</td>
            <td>蓝色</td>
            <td>踢球</td>
            <td>江西</td>
        </tr>
        <tr align="center" valign="middle"">
            <td>王致和</td>
            <td>蓝色</td>
            <td>踢球</td>
            <td>江西</td>
        </tr>
        <tr align="center" valign="bottom">
            <td>王致和</td>
            <td>蓝色</td>
            <td>踢球</td>
            <td>江西</td>
        </tr>

    </table>
</body>
</html>

table中的九宫格方向：

3.8 iframe子窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> iframe 子窗口</title>
</head>
<body>
    <iframe src="" name="isme" width="1000px" height="200px;"></iframe>
    <hr />
    <a href="http://www.baidu.com" target="isme">点我跳转百度</a>
    <a href="3.html" target="isme">点我跳转3.html</a>
    <a href="4.html" target="isme">点我跳转4.html</a>
</body>
</html>

4. 音视频_表单

4.1 音视频标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- https://www.w3school.com.cn/html/index.asp  w3c school 手册 -->
    <video src="ceshi.mp4" controls = "controls" style="width:100px;">
        抱歉~! 您的浏览器不支持,该扔了
    </video>
    <audio src="潮汐-她的城市.mp3" controls = "controls">
        抱歉~! 您的浏览器不支持,该扔了
    </audio>
</body>
</html>

4.2 form标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form表单<</title>
</head>
<body>
    <!-- action 表示提交的数据地址
    method 表示数据以什么样的形式提交
        get    显式获取数据(参数在地址栏上,参数大小在2k~8k左右)
        post   隐式提交数据(参数不在地址栏,参数大小没有限制)
    input 是行内块状元素
    type  指定input的类型
    name  指定input的名字
    value 指定input的默认值
    -->
    <form action="" method="">
        手机号:<input type="text" name="phone" value="王文"  />
        <br />
        密码:  <input type="password" name="pwd" value="李四" style="width:200px;height:50px;" />
        <br />
        <input type="submit" value="提交" />
    </form>
</body>
</html>

5. 小练习

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Python全栈之学习JS(3)

    目录 1. dom节点 1.1 dom节点获取 1.2 节点元素层级关系 1.3 修改_清空内容 1.4 隐藏显示密码效果 2. 全选_反选_不选 2.1 全选_反选_不选 2.2 js控制css的相关属性 2.3 js事件 3. 模态框 1. dom节点 1.1 dom节点获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met

  • Python全栈之学习MySQL(1)

    Python全栈之学习MySQL(1)

    目录 1. mysql约束 2. 外键_联合主键_唯一索引 3. 存储引擎_表关系 总结 1. mysql约束 # ### char varchar (补充) char 字符长度 255个 varchar 字符长度 21845个 # ### part1 时间类型 date YYYY-MM-DD 年月日 (节假日,纪念日) time HH:MM:SS 时分秒 (体育竞赛,记录时间) year YYYY 年份 (历史,酒的年份) datetime YYYY-MM-DD HH:MM:SS 年月日 时分

  • Python全栈之学习MySQL(2)

    Python全栈之学习MySQL(2)

    目录 1. mysql_where子句_聚合函数 2. mysql_其他子句语法 3. mysql_子查询 4. exists关键字 5. 练习所需表数据 6. 小练习 (1)表结构: (2)黏贴如下sql,直接建表 (3)练习题目 总结 1. mysql_where子句_聚合函数 # ### part 单表查询 """ select ... from ... where ... group by ... having ... order by ... limit ... &

  • Python全栈之学习JQuery

    Python全栈之学习JQuery

    目录 1. lable标签补充 2. jquery引入和简单使用 3. 选择器 3.1 基础选择器 3.2 组合选择 3.3 层级选择器 3.4 属性选择器 3.5 表单对象属性选择器 3.6 表单选择器 3.7 筛选器方法 4. 文本操作 4.1 选择器优先级和类值操作 4.2 值操作 4.3 创建标签 4.4 文档操作 4.5 删除和清空标签 4.6 字符串占位符 总结 1. lable标签补充 <!DOCTYPE html> <html lang="en">

  • Python全栈之学习MySQL(3)

    目录 1. pymysql的基本操作 2. sql注入攻击 3. sql增删改查 4. mysql的数据恢复 5. sql语句优化 总结 1. pymysql的基本操作 # ### python 操作mysql import pymysql # ### 1.基本语法 """ # (1) 创建连接对象 host user password database 这四个参数必写 conn = pymysql.connect( host="127.0.0.1" ,

  • Python全栈之学习CSS(1)

    Python全栈之学习CSS(1)

    目录 1. 表单框类型 文件上传: 2. 表单属性 3. css引入 my.css 4. 选择器 4.1 常用选择器 4.2 选择器的优先级 4.3 关系选择器 4.4 属性选择器 4.5 伪类选择器_颜色设置 4.6 伪对象选择器 5. 字体属性设置 cursor属性: 6. 文本属性 7. 盒子模型 order-style: 8. 学习工具 总结 1. 表单框类型 <!DOCTYPE html> <html lang="en"> <head> &

  • Python全栈之学习JS(1)

    目录 1. js的数据类型 1.1 js引入方式 1.2 注释变量 1.3 数据类型 2. js类型转换_运算符 2.1 强制转换_Number 2.2 强制转换_String 2.3 强制转换_Boolean 2.4 自动类型转换_Number_Boolean_String三者之间转换 2.5 js运算符 3. js流程控制 3.1 分支结构 3.2 分支结构_switch_case 3.3 循环结构 4. js函数 4.1 函数 4.2 函数的调用 总结 1. js的数据类型 1.1 js引

  • Python全栈之学习HTML

    Python全栈之学习HTML

    目录 1. vscode相关配置 2. html认识 2.1 html认识 2.2 html结构 2.3 html语法特征 3. 标签种类_列表 3.1 常见标签 3.2 标签种类 3.3 列表 3.4 超链接标签 3.5 a链接跳锚点 3.6 img图片标签 3.7 table表格标签 3.8 iframe子窗口 4. 音视频_表单 4.1 音视频标签 4.2 form标签 5. 小练习 总结 1. vscode相关配置 w3c school 手册: https://www.w3school.

  • Python全栈之学习JS(2)

    目录 1. js对象 1.1 object对象 1.2 json对象 2. js字符串函数 3. js数组相关方法 4. js数学对象相关方法 5. BOM对象 5.1 定时器 5.2 获取年月日时分秒 5.3 Navigator 5.4 历史对象 6. BOM对象location 7. 小提示 ceshi.html: 总结 1. js对象 1.1 object对象 <!DOCTYPE html> <html lang="en"> <head> &l

  • Python全栈之学习CSS(2)

    Python全栈之学习CSS(2)

    目录 1. css背景图 1.1 背景属性 1.2 背景图片引入 2. 相对_绝对_固定 2.1 相对定位 2.2 绝对定位 2.3 固定定位 3. float浮动 3.1 display转换元素 3.2 float浮动 4. html里面的bug 4.1 float内容塌陷问题 4.2 margin-top失效问题 4.3 overflow 总结 1. css背景图 1.1 背景属性 <!DOCTYPE html> <html lang="en"> <h

随机推荐