python学习之HTML

Posted Elience

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了python学习之HTML相关的知识,希望对你有一定的参考价值。

1、HTML初知

<!DOCTYPE html>
<html lang="en">
<head>   html头
    <meta charset="UTF-8">     #设置编码方式为‘UTF-8\'
    <title>Title</title>       #设置html的标题
   <link rel="icon" href="https://csdnimg.cn/public/favicon.ico"/>   #设置标题左端的标识符,还有关键字和描述类型。

</head>  #以上为html的头部内容,主要涉及网站的标题和网站的以些属性内容

<body>   #html体,主要涉及网页页面中的一些内容
    <form enctype = "multipart/form-data" methed:GET>  enctype的这个属性表示将上传的文件提交给后台,action属性表示将<input type=text的文件提交给action,action的参数可以是后台的服务器地址例如:http://localhost:8888/index>
        <div>                         #method:GET表示将用户输入得和action得url拼接在一起发给后台,当input有两个时,中间用&符号将两个用户输入拼接起来发给后台;
            <input type="text" name="user" value=\'中国\'/>  #type=\'text\'表示是一个简单的文本框,后台根据name的参数来取数据,value的值表示默认参数
            <p>请选择性别:</p>      #表示标题的名称
            男:<input type="radio" name="gender" value="1" checked="checked"/> #type=\'radio\'表示单选框,name相同是他们之间互斥的关系,后台根据value的值确定选的是哪一个,checked=checked,表示默认值
            女:<input type="radio" name="gender" value="2"/>
            Alex:<input type="radio" name="gender" value="3"/>

            <p>爱好</p>
            篮球:<input type="checkbox" name="favour" value="1" checked="checked"/>  #type=\'checkbox\'表示复选框,name相同表示之间是一类的,value的值是后台用来识别复选的哪些。checked=checked表示默认设置
            足球:<input type="checkbox" name="favour" value="2"/>
            排球:<input type="checkbox" name="favour" value="3"/>
            皮球:<input type="checkbox" name="favour" value="4"/>
            <p>特长</p>
            撩妹:<input type="checkbox" name="skill" value="1"/>
            大家:<input type="checkbox" name="skill" value="2" checked="checked"/>
            骂人:<input type="checkbox" name="skill" value="3"/>
            刻碟:<input type="checkbox" name="skill" value="4"/>
            <p>上传文件</p>
            <input type="file"/>     type=\'file\'表示上传文件按钮,此时form中的属性应该为enctype.
            <textarea>百度以下,你就知道!! </textarea> #此表示多行文本款
        </div>
        <input type="submit" value="提交" />    #提交,把form表单中的内容提交给后台
        <input type="reset" value="重置" />     #type=\'reset\'表示将form的内容重置,恢复到最初的状态
    </form>
</body>
</html>

按闭合方式:标签分为自闭合和主动闭合标签,其中<   />为自闭合标签,< > <  />为主动闭合标签

按表现形式:标签分为块标签和行标签。

行标签:包含a、span、em、strong、img、var;

a标签:主要用来链接一个其他的网页;

span标签:主要用来对行内的文字进行一些样式以及其他的操作;

em标签:一般用来对文字进行强调,使用斜体体现出来;

strong标签:一般用来对文字进行强调,使用加粗字体体现出来;

img标签:图片引用标签,其中 src属性中写入图片的地址;

var标签:JavaScript中命名变量的标签。

块标签:包含p、div、ul、ol、li、dl、dt、dd、h1~h6;

p标签:段落标签,段落文字使用,默认格式:段尾进行换行;

div标签:划分块的主要使用标签;

ul标签:无序列表的主标签,后面的标号为圆点(黑色);

ol标签:有序列表的主标签,后面一般跟有序的1,2,3,4,5...;

li标签:列表中的主体使用标签

dl标签:自定义标签的主标签;

dt标签:自定义标签的表头;

dd标签:自定义标签的表头的解释(描述)信息;

h1~h6:6级标题标签、字体的大小依次变小。

块标签和行标签的区别:

  1. 块标签:独自占领一行、可以进行宽高的数值的设定;
  2. 行标签:在一行内显示、不可以进行宽高的数值设定;

嵌套规则

  1. 块标签可以套行标签,行标签不可以套块标签。
  2. P标签不要套块属性标签,可以套a,span,文本。。。
  3. 嵌套的时候注意代码的缩进。

2、select标签(下拉选择菜单)

 

<select name="city"size="10"multiple="multiple">   #name=\'city\'表示这个下拉菜单的名称,size表示显示的数量,multiple表示可以多选,多选是需要按住crtl键。
                <option value="1" selected="selected">北京</option>   #value的值时让后台提取数据的,selected=\'selected\'表示默认值;
                <option value="2">天津</option>
                <option value="3">上海</option>
                <option value="4">重庆</option>
                <option value="5">南京</option>
                <option value="6">襄阳</option>
            </select>
            <select>
                <optgroup label="北京">    #optgroup表示选择分组,每一组的标签为label,下边的和上边的一样;
                <option value="1" selected="selected">北京</option>
                <option value="2">东城</option>
                <option value="3">西城</option>
                <option value="4">海淀</option>
                <option value="5">昌平</option>
                <option value="6">怀柔</option>
                </optgroup>
            </select>

 

3、添加跳转标签

<body>
    <a href="#i1">第一章</a>  #href=\'#id\'当点击第一章时,会自动跳转到第一章的内容的这个页面,style表示页面内显示的内容;
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <div id=i1 style="height:500px;">第一章的内容</div>
    <div id=i2 style="height:500px;">第二章的内容</div>
    <div id=i3 style="height:500px;">第三章的内容</div>
    <div id=i4 style="height:500px;">第四章的内容</div>
</body>

4、img标签

 

<a href="https://www.baidu.com">
        <img src="1.jpg" title="大美女" style="height:300px;weight:200px" alt="美女">
    </a>

src表示图片的地址,title表示当鼠标指向图片时,显示的信息,style表示图片的大小,height和值之间用的是冒号,而和weight之间用的是分号,alt表示当无法跳转时,在图片的地方显示的内容,为美女;

5、<ul><ol><dl>标签

 

   <ul>    #ul表示的时列表前边有小圆点
        <li>宝马</li>
        <li>奔驰</li>
        <li>奥迪</li>
        <li>路虎</li>
        <li>卡宴</li>
    </ul>
    <ol>    #表示前边有序号
        <li>宝马</li>
        <li>奔驰</li>
        <li>奥迪</li>
        <li>路虎</li>
        <li>卡宴</li>
    </ol>
    <dl>  #列表标题
        <dt>123456</dt>
        <dd>456789</dd>
        <dd>456789</dd>
        <dd>456789</dd>
        <dd>456789</dd>
        <dd>456789</dd>
    </dl>

 

6、<table>表格标签

<table border="1">
    <thead>
    <tr>
        <th>表1</th>
        <th>表2</th>
        <th>表3</th>
        <th>表4</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="2">1</td>      #colspan表示合并两列
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>      #合并两行
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    </tbody>
</table>

 7、label标签

<body>
    <label for="username">用户名:</label>
    <input id="username" style="text" name = user value="输入用户名"/>
</body>

当点击用户名时同样可以在文本框中输入内容。

8、fieldset标签

fieldset标签中还有legend标签,用来显示图框的名称。

以上是关于python学习之HTML的主要内容,如果未能解决你的问题,请参考以下文章

坚持Selenium+Python学习之从读懂代码开始 DAY1

python学习之函数

Python的学习之-流程控制

Python基础学习之语句和语法

Python学习之装饰器

python学习之函数阶段