08python基础进阶之html

一、web前端技术/web标准
Web前端技术不是一个技术，web前端技术有由w3c制定的 w3c国外的组织机构

Html — 结构标准：负责网页内容
Css — 表现标准/样式标准：美化页面
Js — 行为标准：负责网页行为动作，数据交互，表单验证

二、html介绍
1、html：超文本标记语言
学HTML学就是标记(标签、元素)

2、单标签和双标签
    <标记的名字></标记的名字> — 双标记/双标签

    <标记的名字> — 单标记


3、Html文档的基本结构介绍
    Html — 整个网页文档
    Head — 网页的头，存储和本页面相关的一些信息(比如需要浏览器渲染执行的 css  和 js代码)
    Body — 网页的主体：存储的是显示在浏览器上给用户看的内容
    Title — 网页的标题

    Doctype: 规定文档的dtd格式（规定浏览器到底以哪个版本的html解析接下来的所有代码）  

三、认识html标签

1、常用标签
    <!--注释的内容-->

    <!--标题标签:6个级别-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>二级标题</h3>
    <h6>六级标题</h6>
    <!--常用标签-->
    <p>段落标签p，用来存放一大段文字</p>
    <div>做前端布局最最常用的标签，div里面可以放任意内容，任意标签</div>
    <span>一般用于存放一些小文字，小图片</span>
    <br>  换行符号


2、img标签
    <!--html标签属性： 以 k="v" 的格式书写, 每个属性之间用空格隔开-->

    <!--img 图片标签是一个单标签-->
    <!--img 的src属性：图片的路径-->
    <!--img 的alt属性: 图片加载不成功的时候，显示对应的提示文字-->
    <img src="img01.jpg" alt="图片加载不成功">

    资源路径：
        路径分为：相对路径  绝对路径
        相对路径：同级  上级../    下级 /
        绝对路径：/   盘符   互联网绝对地址

    相对路径是指相对于当前文件的路径，即从当前文件触发，找到目标资源
    绝对路径一般从盘符出发，或者是网络上的路径


3、a标签
    a标签，超链接标签，用来做页面跳转
    a标签的href属性：用来指定跳转到哪一个页面
    a标签的target="_blank"：指定在新的有窗口中打开页面

    <a href="http://www.baidu.com">点我跳转到百度</a>
    <a href="http://www.taobao.com">淘宝网</a>
    <a href="#">假链接</a>
    <a href="http://www.taobao.com" target="_blank">在新窗口中打开</a>
    <br>

    如何点击图片跳转页面？(图片外层嵌套a标签)
    <a href="http://www.taobao.com">
        <img src="img01.jpg" alt="">
    </a>

4、小总结

    学习 html 语言就是学习标签的用法，常用的标签有20多个。
    html 标签不区分大小写，建议使用小写
    根据书写形式，html 标签分为双标签和单标签
    单标签没有标签内容，双标签可以嵌套其它标签和文本内容
    html中的缩进是为了可读性

三、html中其他常用的标签
1、列表标签分为：无序列表、有序列表
列表标签都有一个整体的大标签嵌套着每一个小标签
无序列表 ul是整体标签 li某一项

• 
  
• 美军威力最大的火箭弹，一发可干掉一支轰炸机编队
• 
  
• 伊拉克萨德尔派发声　不介入美国与伊朗矛盾
• 
  
• 俄媒：俄罗斯与北约展开北极“军备竞赛”
• 
  
• 伊朗回应美国增兵:“敢乱来就让它们葬身海底”
• 
  
• 美军爆料：如何让F-16“山寨”苏-57
• 
  

1. 
   
2. 美军威力最大的火箭弹，一发可干掉一支轰炸机编队
3. 
   
4. 伊拉克萨德尔派发声　不介入美国与伊朗矛盾
5. 
   
6. 俄媒：俄罗斯与北约展开北极“军备竞赛”
7. 
   
8. 伊朗回应美国增兵:“敢乱来就让它们葬身海底”
9. 
   
10. 美军爆料：如何让F-16“山寨”苏-57
11. 
    

2、表格标签
    <!--表格标签-->
    <!--table  表格整体标签-->
    <!--tr  行标签，一个tr表示一行-->
    <!--td  单元格标签，一个td表示一个单元格-->
    <table>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
    </table>

    css中如何设置边框折叠：
        /*设置表格边框折叠*/
        border-collapse:collapse;

3、表单元素及表单提交
    1、认识表单元素
        <form action="要提交到的地址" method="post">  <!-- 表单域标签 -->
            <lable>文本框：</lable><input type="text"> <br><br>
            <lable>密码框：</lable><input type="password"><br><br>

            <lable>性别：</lable>
            <input type="radio">男
            <input type="radio">女<br><br>

            <lable>兴趣：</lable>
            <input type="checkbox">敲代码
            <input type="checkbox">听音乐
            <input type="checkbox">看书<br><br>

            <lable>籍贯：</lable>
            <select>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
            </select><br><br>
            <lable>个人描述：</lable>
            <textarea></textarea><br><br>
            <lable>照片：</lable>
            <input type="file"><br><br>

            <input type="submit">  <!-- 点击这个提交按钮，浏览器会把用户填写的数据提交到服务器，具体地址就是 form元素的action -->
            <input type="reset">  <!--  重置为刷新页面时候的表单的状态  -->

            <input type="button"> <!--  (了解)普通按钮 不具备提交功能  -->
            <button>按钮2</button> <!--  (了解)IE浏览器下没有提交效果，其他浏览器有提交效果-->
            
        </form>

    2、表单提交功能：
        点击<input type="submit">按钮，浏览器会自动把用户填写的数据提交到服务器
        其中表单元素有自己的name属性和value属性(标签属性)
        name属性  设置表单元素的名称
        value属性  设置表单元素的值，即用户填写值或者用户选中的信息

        即，在服务器中用过name属性拿到用户所填或者所选的信息