• Python:Day40 html


    URL包括三个部分:协议、域名、路径

    htyper text markup language (html)  即超文本标记语言

     前端一共包括三个内容:html、css、js

    html做为基础,让CSS进行渲染,js进行动画

    <h1> </h1>  这个整体就是h1标签,标签的名字就是h1,h就是head的缩写,是标题的意思,是闭合标签

     <head>标签里面的内容都是网页上看不到的内容,但是都和浏览器解析有关的一些内容

    标签不区分大小写,推荐使用小写

    标签的属性写在标签中,如:<h1 id='123'>,属性是由一组组的键值对来表示的,只能出现在开始标签或自闭合标签中。

    如果属性名和属性值完全一样,直接写属性名即可,这是缩写的一种表现

    有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />自闭合标签中的/可以加也可以不加,可以放前面也可以放后面,通常放后面,这样只是为了方便看。

     <mate>标签

    meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="2,url=http://www.jd.com">   
    前面的为秒数,后面的为地址,地址必须要有http://,前面的url=可以不加,不区分大小写,不加后面URL的话,就是刷新本页面
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">

    name属性一共有两个值:keywords/description

    <title>标签

    <title>博客园</title>

    title标签中的内容就是显示在打开网页的最上面的。

    <link>标签

    rel:relationship的英文缩写,rel属性用于定义链接的文件和HTML文档之间的关系。

    注意:HTML中只有在使用了 href 属性的情况下才能使用 rel 属性。

    rel属性是必需的。定义当前文档与被链接文档之间的关系。

    href是Hypertext Reference的缩写。意思是指定超链接目标的URL。

    <link rel="icon" href="http://www.jd.com/favicon.ico">

    以下为body标签:

    <h1>标签

    h标签只有6个,就是h1-h6,是块级标签

    <p>标签

    段落标签,不仅换行,而且中间还隔行,是块级标签

    <p>床前明月光</p>
    <p>疑是地上霜</p>

    <br/>换行标签

    br是break的简写。由于html对于多个空格或换行,只认为是一个空格,所以需要此标签

    床前明月光<br/>
    疑是地上霜

    <hr/>水平线标签

    <div>标签

    div标签的功能是什么能功能都没有,是一个块级标签

    hello before<div>hello world</div>
    显示结果:
    hello before
    hello world

     <span>标签

    span标签和div标签一样,都是什么功能都没有,是内联标签。

    <img>标签

    img是给网页加图片的标签,是内联标签

    <img src="1.jpg" width="200px" height="200px" alt="图片加载不成功时提示的" title="鼠标放在图片是显示的文字">

    <a>标签

    a标签是内联标签

    a标签两个功能:1、链接   2、锚(href后面引用的id前面一定要加#号)

    <a href="http://www.baidu.com" target="_blank" title="鼠标放在文字上显示的内容">百度</a>  traget的作用是在当前页打开还是从新开一页,blank是新开一页
    
    <a href="#div1">第一章</a>
    <div id="div1">第一章内容</div>

    列表标签

    ul是unordered list  无序列表

    ol是ordered list  有序列表

    dl是defind list  定义列表,目录那种格式

    dt是defind title  定义标题

    dd是defind data  定义数据

    <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>
    
    <ol>
        <li>2222</li>
        <li>2222</li>
        <li>2222</li>
    </ol>
    
    <dl>
        <dt>第一章</dt>
        <dt>第二章</dt>
        <dt>第三章</dt>
    </dl>

    <table>表格标签

    border: 表格边框.
    
    cellpadding: 内边距
    
    cellspacing: 外边距.
    
    <tr>: table row
    
             <th>: table head cell
    
             <td>: table data cell
    
    rowspan:  单元格竖跨多少行
    
    colspan:  单元格横跨多少列(即合并单元格)
    
    <th>: table header <tbody>(不常用): 为表格进行分区.

    示例:

    <table border="1">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>邮箱</th>
        </tr>
    
        <tr>
            <th rowspan="2">姓名</th>
            <th>性别</th>
            <th>邮箱</th>
        </tr>
    
        <tr>
            <th colspan="2">性别</th>
        </tr>
    
    </table>

    <form>标签

    所有的表单内容都要放在form标签中,不然这些数据都不知道要发到哪。

    form表单中有input、select、textarea、label标签

    input标签中又有很多的类型。

    select标签中要插入<option>或<optgroup>标签

    label标签通过id和其它标签进行关联

    <form action="/xiaohu" method="post" enctype="multipart/form-data">
        <p>用户名:<input type="text" name="username"></p>
        <p>密码:<input type="password" name="pwd"></p>
        <p>性别:男<input type="radio" name="sex" value="0"> </p>
        <p><input type="radio" name="sex" value="1"></p>
        <p>爱好:篮球<input type="checkbox" name="hobby" value="basketball"></p>
        <p>足球<input type="checkbox" name="hobby" value="football"></p>
        <p><input type="file" name="doc"></p>
    
        出生地:<select name="city" multiple size="2">
            <option value="beijing">北京</option>
            <option value="tianjing">天津</option>
            <option value="shanghai">上海</option>
            <option value="jiangsu">江苏</option>
        </select>
    
        城市:<select name="province" >
            <optgroup label="江苏省">
                <option value="nanjing">南京</option>
                <option value="suzhou">苏州</option>
                <option value="yangzhou">扬州</option>
            </optgroup>
            <optgroup label="北京省">
                <option value="chaoyang">朝阳</option>
                <option value="haidian">海淀</option>
                <option value="yizhuang">亦庄</option>
            </optgroup>
        </select>
    
        <textarea rows="20" cols="20">自我简介</textarea>
    
        <label for="idhao">姓名</label>
        <input id="idhao" type="text">
    
        <p><input type="submit" value="提交"></p>
    </form>

    form标签里面如果不填action和method时,会有一个默认值,默认当前URL和GET方法

    input标签是自闭合,内联标签

     <QueryDict: {'pwd': ['77932423'], 'sex': ['0'], 'hobby': ['basketball', 'football'], 'username': ['bili']}>

    file: <MultiValueDict: {'doc': [<InMemoryUploadedFile: 20180326121913.png (image/png)>]}>

     表单是以一个字典的形式发过去的,键就是input中的name属性,值是一个列表,对于文本框,值就是输入的内容,对于选择框,值要在input中设置value。

     <select>中mutiple属性的效果是可以选择多个,size的效果是能同时看到几个选择项

    其它标签:

    注意:这些标签都是内联标签

    <b>给字体加粗</b>
    <em>变成斜体</em>
    <strike>去除</strike>
    <del>delete</del>
    2<sup>3</sup>
    2<sub>3</sub>
     显示结果: 给字体加粗 变成斜体 去除 delete  23 23

    特殊符号:

    &nbsp;  代表一个空格

    &copy;  代表版权符号

    &lt;  代表小于号

    &gt;  代表大于号

    注意:所有的标签统分为块级和内联

    内联(in-line)标签就是自己占一块,占多少取决于中间内容大小。块级(block)标签。

  • 相关阅读:
    抽象类的练习
    Java异常处理1
    接口的应用
    接口之代理模式
    接口之工厂方法的设计模式
    给ubuntu系统换新装
    2的幂次方表示(OJ 8758)
    Fibonacci【矩阵乘法】(POJ 3070)
    斐波那契公约数(luogu 1306)
    枪战Maf (bzoj 1124)
  • 原文地址:https://www.cnblogs.com/sq5288/p/8671939.html
Copyright © 2020-2023  润新知