day50 Pyhton 前端01

文档结构:
<!-- 定义文档类型 -->
<!DOCTYPE html>
<!-- 文档 -->
<html lang='en'>  <!-- 仅仅为了提示浏览器,该翻译我了 -->
<head>
        <meta charset='UTF-8'>  <!-- 规定编码格式 -->
        <title>赵天一</title> <!-- 标题,你的页面上在浏览器上显示的内容 -->

</head>
<body>
页面内容
</body>
</html>

h1~h6

标题标签,一级标题,一个页面中只能存在一个h1

数字越大,标题的级别越小

超过数字6,浏览器不做渲染(浏览器解释你的写的代码之后的结果)

<html lang="en">  <!-- 仅仅为了提示浏览器,该翻译我了 -->
<head>
    <meta charset="UTF-8">  <!-- 规定编码格式 -->
    <title>赵天一</title>  <!-- 标题,你的页面上在浏览器上显示的内容 -->

</head>
<body>
<h1>得劲的第一次</h1>
<br>
<h2>得劲的第一次</h2>
<p>
<h3>得劲的第一次</h3>
<h4>得劲的第一次</h4>
<h5>得劲的第一次</h5>
<h6>得劲的第一次</h6>
<h7>得劲的第一次</h7>
带劲坤的第一次还在吗?
</body>
</html>

br 换行
p  段落,自带换行,前后自带间隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>张梦书</title>
</head>
<body>
<a name="top"></a>
<a href="#dibu" title="鼠标放上来就出来的文字">回到底部</a>
<a href="http://www.luffycity.com" target="_blank">昨晚浏览的网站:www.4399.com</a>
<p>
<h2>得劲的第一次</h2>
<h3>得劲的第一次</h3>
<h4>得劲的第一次</h4>
<h5>得劲的第一次</h5>
<h6>得劲的第一次</h6>
<h7>得劲的第一次</h7>
<h2>得劲的第一次</h2>
<h3>得劲的第一次</h3>
<h4>得劲的第一次</h4>
<h5>得劲的第一次</h5>
<h6>得劲的第一次</h6>
<h7>得劲的第一次</h7>
<h2>得劲的第一次</h2>
<h3>得劲的第一次</h3>
<h4>得劲的第一次</h4>
<h5>得劲的第一次</h5>
<h6>得劲的第一次</h6>
<h7>得劲的第一次</h7>
<h2>得劲的第一次</h2>
<h3>得劲的第一次</h3>
<h4>得劲的第一次</h4>
<h5>得劲的第一次</h5>
<h6>得劲的第一次</h6>
<h7>得劲的第一次</h7>
<h2>得劲的第一次</h2>
<h3>得劲的第一次</h3>
<h4>得劲的第一次</h4>
<h5>得劲的第一次</h5>
<h6>得劲的第一次</h6>
<h7>得劲的第一次</h7>
<a href="http://www.luffycity.com" target="_self">昨晚浏览的网站:www.4399.com</a>
<a name="dibu"></a>
<a href="#top">回到顶部</a>
</body>
</html>

a

href属性:指定将要跳转到的地址

　　地址可以是网络连接,也可以是本地连接

target:

　　_slef:本页面,默认

　　_blank:另起页面

锚链接属性:

　　设置锚点:通过name属性设置锚点名称

　　通过href:找掉锚点

title:鼠标放上去后显示解释的文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>张梦书</title>
</head>
<body>
<H1>张梦书</H1>
<img src="http://p3.pstatp.com/large/pgc-image/50e2d810ee53418fa5b4f4f8a" alt="此图片是一个车模">
<p>
<img src="某美女.jpg" alt="" title="鼠标放上去后,显示的文字" align="center">
</body>
</html>

img

src:可以连接图片网络地址,也可以连接本地图片的地址.

alt:当图片损坏的时候,提醒用户这是什么东西.

width:宽度,单位是像素

height:高度,单位是像素

title:鼠标放上去后的文字

align:默认靠左,设置成right就可以靠右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>张梦书</title>
</head>
<body>
<ul type="circle">
    <li>list</li>
    <li>append</li>
    <li>insert</li>
    <li>pop</li>
    <li>pop</li>
</ul>
<ol type="A" start="2">
    <li>吃饭</li>
    <li>学习</li>
    <li>看书</li>
    <li>python</li>
    <li>前端</li>
    <li>linux</li>
    <li>Java</li>
</ol>
<dl>
    <dt>黑哥</dt>
    <dd>不爱穿胖次</dd>
    <dd>天天偷胖次</dd>
    <dd>再吃</dd>
    <dd>再偷</dd>
    <dd>再吃</dd>
    <dd>没吃饱</dd>
</dl>
</body>
</html>

无序列表ul

只能包裹li

更改无序列表的类型用type:默认是实心圆,可更改为空心圆(circle),及正方块(square)

ol有序列表

只能包裹li

type更改序号的类型,可以是字母,阿拉伯数字,古罗马数字

start:序列从哪开始

dl:定义列表

dt,定义列表的标题

dd:内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>张梦书</title>
</head>
<body>
<table border="'5px" bordercolor="red" width="890px" height="1334px" align="center" >
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>爱好</td>
        <td>年龄</td>
        <td>职业</td>
    </tr>
    <tr>
        <td>哭加为</td>
        <td>不详</td>
        <td>抠脚</td>
        <td>83</td>
        <td>职业抠脚</td>
    </tr>
    <tr>
        <td bgcolor="#8a2be2">江老师</td>
        <td rowspan="2">母</td>
        <td colspan="2">男</td>
        <td>16</td>
        <td>兽医</td>
    </tr>
</table>
</body>
</html>

table

tr:代表一行

　　td:代表一行内的一个单元格

table有很多的属性

　　border:边框,可设置soild,也可以设置成像素单位

　　bordercolor:边框的颜色

　　width:宽度,单位是px

　　height:高度,单位是px

　　bgcolor:背景颜色

　　background:背景图片

　　align:对齐方式

　　单元格的合并:colspan横向合并,rowspan纵向合并

　　style="border-collapse: collapse" 它的作用是让表格的线变成一条实心线,但是不能跟单元格合并的操作一起使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>张梦书</title>
</head>
<body>
<form>
    <label for="1">用户名:</label>
    <input type="text" id="1" name="username" value="车干" height="32px">

    <br>
    <br>
    <label for="2">密码:</label>
    <input type="text" id="2" name="password" value="密码" height="32px">
    <br>
    <input type="checkbox">
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <input type="submit" value="提交">
    <input type="button" value="提交">
    <input type="file" >
    <input type="date">
    <input type="image"  width="20px">

    <select multiple size="10">
        <option value="zhengyanggao" >蒸羊羔</option>
        <option value="zhengxiongzhang">蒸熊掌</option>
        <option value="">蒸鹿尾</option>
        <option value="">烧花鸭</option>
        <option value="" selected>一盆米饭我够了</option>
    </select>
    <textarea></textarea>
</form>
</body>
</html>

form

input,type的转换,input输入框的类型会发生变化  |  label跟input一起的

type=text是普通输入框  | name属性定义一个要给服务器的键值对的键

type=password的时候是密文输入框  |  value属性定义一个要给服务器的值

type=checkbox的时候是选择框

type=radio的时候是单选框

type=submit,提交按钮

type=file,提交文件

type=date日期输入框

type=image图片提交,自带submit

select

option,每一个下拉选项

默认选中:selected

允许多选:multiple

size:下拉框的大小