文档结构:

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

<!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() 查找后代的元素 - ...

随机推荐

获取.properties配置文件属性值
public class TestProperties { /** * * @Title: printAllProperty * @Description: 输出所有配置信息 * @param pro ...
get_started_3dsctf_2016
题外:这道题不是很难,但是却难住了我很久.主要是在IDA中查看反编译出的伪代码时双击了一下gets()函数,结果进入gets函数内部,我当时就懵了,误以为这是一个自定义函数,但是自定义函数应该应该不能 ...
企业网站还是要考虑兼容至少IE10
中国国情,大部分企业还在使用win7,IE浏览器.为了兼容这些,还是少用比较VUE等一些高级的框架,改为使用jquery.用惯了VUE,jquey好多忘得差不多了,其中遇到的问题及解决方案 ajax, ...
2020年 .NET ORM 完整比较、助力选择
.NET ORM 前言为什么要写这篇文章? 希望针对 SEO 优化搜索引擎,让更多中国人知道并且使用.目前百度搜索 .NET ORM 全是 sqlsugar,我个人是无语的,每每一个人进群第一件事就 ...
oracle之二日志挖掘log miner
日志挖掘 log miner 6.1 log miner的作用: 数据库恢复中有时会需要对Redo log进行分析, 要会使用log miner,以便确定要恢复的时间点或SCN 6.2 有两种日志挖掘 ...
JS数据类型及常用操作
1.字符串 2.数字类型 3.布尔类型 4.数组类型 5.字典
Oracle闪回flashback
参考资料:Using Oracle Flashback Technology Oracle 11g的新特性闪回操作闪回查询闪回查询闪回版本查询闪回事务查询闪回数据闪回表闪回删除闪回数据 ...
Vue Render自定义tabled单元格内容
解决问题只举一个例子(我正好需要用到的) 在写中后台时, 如果对表格组件再度封装了, 比如这样的以element-ui 为例: <template> <el-table :d ...
[Node]创建静态资源服务器
项目初始化 .gitignore cnpm i eslint -D eslint --init得到.eslintrc.js .eslintrc.js module.exports = { 'env': ...
hystrix文档翻译之插件
插件可以通过实现插件来改变Hystrix的行为.可以通过HystrixPlugins来注册自定义插件,这些插件会被应用到HystrixCommand,HystrixObservableCommand ...

day50 Pyhton 前端01

h1~h6

a

img

无序列表ul

只能包裹li

ol有序列表

dl:定义列表

table

form

select

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

随机推荐

热门专题