欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Html5_标签

程序员文章站 2022-03-30 15:41:20
HTML 1、一套规则,浏览器认识的规则。 2、开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ****** - 数据库获取数据,然后替换到html文件的指定位置(Web框架) 3、本地测试 - 找到文件路径,直接浏览器打开 - pycharm打开测试 4、编写Ht ......

 

HTML
1、一套规则,浏览器认识的规则。
2、开发者:
  学习Html规则
  开发后台程序:
  - 写Html文件(充当模板的作用) ******
  - 数据库获取数据,然后替换到html文件的指定位置(Web框架)

3、本地测试
  - 找到文件路径,直接浏览器打开
  - pycharm打开测试
4、编写Html文件
  - doctype对应关系
  - html标签,标签内部可以写属性 ====> 只能有一个
  - 注释: <!-- 注释的内容 -->
5、标签分类(自闭合/主动闭合    块级标签/内联标签)
  - 自闭合标签
    <meta charset="UTF-8">
  - 主动闭合标签
    title>老男孩</title>
6、
head标签中
  - <meta -> 编码,跳转,刷新,关键字,描述,IE兼容
  <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
  - title标签
  - <link /> 搞图标,欠
  - <style />欠
  - <script> 欠
7、body标签
  - 图标, &nbsp; &gt; &lt;
  - p标签,段落
  - br,换行
======== 小总结 =====
所有标签分为:(自闭合/主动闭合    块级标签/内联标签)
块级标签: div(白板),H系列(加大加粗),p标签(段落和段落之间有间距)
行内标签: span(白板)
标签之间可以嵌套
标签存在的意义,css操作,js操作
ps:chorme审查元素的使用
- 定位
- 查看样式
- h系列
- div 块级标签白板
- span 内联标签白板
- input系列 + form标签
  input type='text' - name属性,value="赵凡"
  input type='password' - name属性,value="赵凡"
  input type='submit' - value='提交' 提交按钮,表单
  input type='button' - value='登录' 按钮

  input type='radio' - 单选框 value,checked="checked",name属性(name相同则互斥)
  input type='checkbox' - 复选框 value, checked="checked",name属性(批量获取数据)
  input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data"
  input type='rest' - 重置
  <textarea >默认值</textarea> - name属性
  select标签 - name,内部option value, 提交到后台,size,multiple
- a标签
  - 跳转
  - 锚 href='#某个标签的ID' 标签的ID不允许重复

- img 图片
  src
  alt
  title

- 列表
  ul
  li
  ol
  li
  dl
  dt
  dd
- 表格
  table
    thead 表头
      tr 行
      th列
    tbody 身体
      tr行
      td列
        colspan = '' 左右横跨几列
        rowspan = ''上下横跨几行
- label
  用于点击文件,使得关联的标签获取光标
  <label for="username">用户名:</label>
  <input id="username" type="text" name="user" />
- fieldset
legend
- 20个标签

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="refresh" content="3">                                  &lt;!&ndash;自动刷新&ndash;&gt;-->
    <!--<meta http-equiv="refresh" content="3;Url=http://www.xju.edu.cn/">       &lt;!&ndash;自动跳转&ndash;&gt;-->
    <meta name="keywords" content="新大,*大学,大学,211,双一流">        <!--关键字,搜索引擎关键字搜索用-->
    <meta name="description" content="*大学是双一流,211,边疆重本。。。">  <!--网站描述-->
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=IE9;IE=IE8;IE=IE7" />      <!--网站对浏览器的兼容-->
    <title>*大学欢迎你</title>                                                 <!--title-->
    <link rel="shortcut icon" href="C:\Users\Administrator\PycharmProjects\untitled\前端\html\image\aaa.png" />

    </head>
    <body>
    <div>
        <p>p标签 代表段落,段落与段落之间,存在间距 <br />  'br'标签是自闭和标签,用于段落之间的换行</p>
        <h1>h1最大</h1>
        <h3>啊啊啊</h3>
        <h6>h6最小</h6>
        <span>标签分为:自闭和标签,不自闭和标签<br /></span>
        <span>标签分为:块级标签(h系列(加大加粗)),<br /> &nbsp;&nbsp;&nbsp;&nbsp;或者行内标签(内联标签(白板))</span>
        <span>空白标签</span>
        <span>行内标签</span>
        <div>div 是块级标签 也是白板</div>
        <div>标签之间可以嵌套</div>
        <div>标签存在的意义: 方便定位,js操作,css操作</div>
        <form action="url" method="get/post">
            <!--当用户输入用户名密码时,利用from标签将用户名和面膜以字典的形式传给url({user:'输入的用户名,pwd:'输入的密码''})-->
            <input type="text" name="user" value="请输入用户名:">   <!--单行文本框-->
            <br />
            <input type="password" name="pwd" >
            <input type="button" value="登录">
        </form>
        <form action="https://www.sogou.com/web" enctype="multipart/form-data">
        <div>
            <br />
            <input type="text" name="query">
            <input type="submit" value="搜索">
            <br />
            <div>请选择性别:</div>
            男: <input type="radio" name="sex" value="1">    <!--单选框,类似于选择性别,若name相同,则几个选项互斥,根据value来传值-->
            女: <input type="radio" name="sex" value="1">
            alex: <input type="radio" name="sex" value="1">
            <p>爱好:</p>
            打球: &nbsp;&nbsp;<input type="checkbox" name="打球" checked="checked">  <!--复选框 name的值一般一个复选框一样  checked="checked 为默认被选中 单选框也可以默认"-->
            睡觉: &nbsp;&nbsp;<input type="checkbox" name="睡觉">
            看书: &nbsp;&nbsp;<input type="checkbox" name="看书">
            游戏: &nbsp;&nbsp;<input type="checkbox" name="游戏">
            吉他: &nbsp;&nbsp;<input type="checkbox" name="吉他">
            <br />
            <p>
                <input type="file" name="fname">
                <!--上传文件依赖于form标签的 enctype="multipart/form-data" 属性 没这个属性 上传不了,这个属性用于将选定的文件发给服务器-->
            </p>
            <textarea name="meno">多行文本框,默认值写在中间</textarea>
            <p>选择城市()下拉框:</p>
            <select name="city"  size="10" multiple="multiple">
                <!--下拉框,服务器端拿testarea的name,根据option中的value属性传数据,size表示默认显示大小selected=selected表示默认选中,multipart=multipart为多选-->
                <option value="1" selected="selected">上海</option>
                <option value="2">成都</option>
                <option value="3">西安</option>
            </select>

            <!--下拉框分组-->
            <select>
                <optgroup label="河北省">
                    <option>石家庄</option>
                    <option>邯郸</option>
                </optgroup>
                <optgroup label="陕西省">
                    <option>西安</option>
                    <option>咸阳</option>
                    <option>汉中</option>
                </optgroup>
            </select>
        </div>
        <input type="submit" value="登录">         <!-- #加上from标签后 点击type='submit(提交按钮:表单)'按钮会提交数据-->
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" value="重置">               <!--将当前form表单中用户输入的东西清空-->
    </form>
    </div>
    <!--a标签用来跳转超链接,target='_blank'在新界面打开-->
    <a href="ht tp://www.xju.edu.cn/" target="_blank">* &nbsp;&nbsp;&nbsp;&nbsp;大学</a>
    <!--让a标签和某一标签建立关联,就用href关联改标签的id加上#-->
    <!--<a href="#i1">第一章节</a>-->
    <!--<a href="#i2">第二章节</a>-->
    <!--<a href="#i3">第三章节</a>-->
    <!--<a href="#i4">第四章节</a>-->
    <!--<div id="i1" style="height:600px">第一章节的内容</div>-->
    <!--<div id="i2" style="height:600px">第二章节的内容</div>-->
    <!--<div id="i3" style="height:600px">第三章节的内容</div>-->
    <!--<div id="i4" style="height:600px">第四章节的内容</div>-->
    <a href="https://www.baidu.com">
        <img src="../image/1.jpg" alt="女神" title="吉泽明步" style="height:200px;width:300px">
        <!--<img src="image/4.gif" alt="女神" title="吉泽明步">-->
    </a>
    <ul>
        <li>带点的列表</li>
        <li>带点的列表</li>
        <li>带点的列表</li>
    </ul>
    <ol>
        <li>带序号的列表</li>
        <li>带序号的列表</li>
        <li>带序号的列表</li>
    </ol>
    <dl>
        <dt>标题</dt>
        <dd>内容</dd>
        <dd>内容</dd>
        <dd>内容</dd>
        <dt>标题</dt>
        <dd>内容</dd>
        <dd>内容</dd>
        <dd>内容</dd>
    </dl>
    <table border="1" style="height:200px;width:200px">
        <thead>
            <tr>
                <th>网站名称</th>
                <th>网址</th>
                <th>跳转</th>
                <th>详情</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>百度</td>
                <td>百度</td>
                <td colspan="2">百度</td>
                <!--colspan=2代表左右横跨两列-->
            </tr>
            <tr>
                <td rowspan="2">百度</td>
                <!--rowspan=2代表上下横跨两列-->
                <td>百度</td>
                <td>百度</td>
                <td>百度</td>
            </tr>
            <tr>

                <td>百度</td>
                <td>百度</td>
                <td>百度</td>
            </tr>
        </tbody>
    </table>
    <fieldset>
        <legend>登录</legend>   <!--fieldset和legend配套使用,实现画一个框-->
        <label for="username">用户名:</label> <!--label是实现点击文字获取光标-->
        <input id="username" type="text">
        <br />
        <label for="pwd">密码:</label>
        &nbsp;&nbsp;&nbsp;<input id="pwd" type="text">
    </fieldset>
</body>
</html>