文档结构:

<!-- 定义文档类型 -->

<!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:下拉框的大小

day50 Pyhton 前端01的更多相关文章

Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
前端01 /HTML简单简绍
前端01 /HTML简单简绍目录前端01 /HTML简单简绍 1.web服务本质 2.浏览器的工作流程 3.HTML是什么 4.web服务本质 5.HTML文档结构 6.HTML注释 6.标签语法 ...
day13_雷神_前端01
#前端 html 服务器端返回的就是一个字符串,浏览器根据html规则去渲染这个字符串. html 是超文本标记语言,相当于定义统一的一套规则,大家都遵守它,这样就可以让浏览器根据标记语言的规则去解释 ...
谷哥的小弟学前端(01)——HTML常用标签（1）
探索Android软键盘的疑难杂症深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...
前端 ----- 01 -html介绍和head标签
01-html介绍和head标签主要内容 web标准浏览器介绍开发工具介绍 HTML介绍 HTML颜色介绍 HTML规范 HTML结构详解一.web标准 web准备介绍: w3c:万维网联 ...
前端01 HTML5
01工具使用 Sublime插件安装和使用 2Sublime插件安装和使用.pcf 3Sublime插件安装与卸载.pcf 4Sublime安装markdown插件.pcf 使用typora生成pdf ...
day56 Pyhton 前端Jquery08
前端内容回顾: -BOM -jquery介绍 -jquery下载和引入方式 npm install jquery -jquery的选择器 -基本选择器 -通配符选择器 - id选择器 - 类选择器 ...
day55 Pyhton 前端Jquery07
昨日回顾: 表单,点击submit提交以后,服务端受到信息 import socket import pymysql from urllib.parse import unquote def run( ...
day57 Pyhton 前端Jquery09
内容回顾: - 筛选选择器 $('li:eq(1)') 查找匹配的元素 $('li:first') $('li:last') - 属性选择器 - 筛选的方法 - find() 查找后代的元素 - ...

随机推荐

转载：51cto 2019好文精选
转载地址:https://news.51cto.com/art/202001/609544.htm 01.知识科普傻瓜都能看懂,30张图彻底理解红黑树! TCP三次握手,四次挥手,你真的懂吗? 面试 ...
现象：当指定logback的FileNamePattern为日期2020-01-15后，如果有线程不断的往里写log，过了零点文件不会变成下一日2020-01-16，还是会在2020-01-15里继续写结论：写log的线程不停，文件不会按日子更换。
logback版本:1.1.11 这个是我实验验证的,昨天我配置了一个logback,然后用两个线程不断往里写log,结果发现到了今天2020-01-16日,log文件还是昨天的logbackCfg. ...
PicGo软件搭配gitee实现图床
1.安装PicGo软件,并配置gitee 1.1安装picGo picGo 安装gitee-uploader 插件官网下载地址如下:最新版本可以自行选择版本进行下载,这里我选择了最新的版本进行下载 ...
认证授权：IdentityServer4 - 各种授权模式应用
前言: 前面介绍了IdentityServer4 的简单应用,本篇将继续讲解IdentityServer4 的各种授权模式使用示例授权模式: 环境准备 a)调整项目结构如下: b)调整cz.Id ...
Charles 抓包（Charles二）
前面安装了Charles,并初步配置了一下:https://blog.csdn.net/qq_38175040/article/details/105411407 今天开始正式抓包了但过程却不是很顺 ...
单链表的前K个的逆序输出
单链表逆序输出也是常被面试官问到题算法题,所以自己就总结了一下,在此贴出算法,与小伙伴们相互交流. 首先要有三个指针,前两个分别指向首节点,首节点的下一个节点,第三个是临时指针,是为了储存首节点的下一 ...
Skywalking Php注册不上问题排查
Skywalking是一款分布式追踪应用,具体介绍可以参考 skywalking. 最近公司的一个Php应用在Skywalking后台查不到数据了: 登录到某台服务器上发现注册不上,启动时就报错了: ...
Hive使用Calcite CBO优化流程及SQL优化实战
目录 Hive SQL执行流程 Hive debug简单介绍 Hive SQL执行流程 Hive 使用Calcite优化 Hive Calcite优化流程 Hive Calcite使用细则 Hive向 ...
tomcat在windows下安装
1.下载地址:https://tomcat.apache.org/download-90.cgi Binary是编译好的,可以直接使用的版本: tar.gz,解压即可用: Source是源代码版本,需 ...
Centos-显示或修改系统时间与日期-date
date 显示或者修改系统时间与日期,只有超级用户才能用date命令设置和修改时间,普通用户只能显示时间相关参数 -s 设置设置时间,格式为 Y-m-d H:M:S -d 对日期进行运算, + ...

day50 Pyhton 前端01

h1~h6

a

img

无序列表ul

只能包裹li

ol有序列表

dl:定义列表

table

form

select

day50 Pyhton 前端01的更多相关文章

随机推荐

热门专题