文档结构:

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

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

随机推荐

20190928-01Redis五大数据类型之Hash和Zset 000 029
touchstart 事件与 click 事件的冲突
const clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) retu ...
图解并发与并行-分别从CPU和线程的角度理解
本文作为图解java并发编程的第三篇,前2篇访问地址如下所示: 图解进程线程.互斥锁与信号量-看完还不懂你来打我 8成以上的java线程状态图都画错了--图解java并发第二篇一.CPU角度的并发与 ...
【吴恩达课程使用】keras cpu版安装【接】- anaconda (python 3.7) win10安装 tensorflow 1.8 cpu版
一.确认tensorflow的版本: 接上一条tensorflow的安装,注意版本不匹配会出现很多问题!:[吴恩达课程使用]anaconda (python 3.7) win10安装 tensorfl ...
Robotframework自动化1-Windows环境搭建
前言: robotframework环境搭建-环境准备 1.python2,pip2 2.WxPython 3.Robot Framework 4.Robotframework-ride 5.RIDE ...
Vue企业级优雅实战04-组件开发01-SVG图标组件
(后续的文章公众号会提前一周更新,欢迎关注文末的微信公众号:程序员搞艺术) 预览本文的实现效果: # gitee git clone git@gitee.com:cloudyly/dscloudy- ...
手写spring
体系结构 Spring 有可能成为所有企业应用程序的一站式服务点,然而,Spring 是模块化的,允许你挑选和选择适用于你的模块,不必要把剩余部分也引入.下面的部分对在 Spring 框架中所有可用的 ...
kvm虚拟化存储管理（3）
一.KVM 存储虚拟化介绍 KVM 的存储虚拟化是通过存储池(Storage Pool)和卷(Volume)来管理的. Storage Pool 是宿主机上可以看到的一片存储空间,可以是多种型: Vo ...
云计算openstack共享组件——时间同步服务ntp（2）
一.标准时间讲解地球分为东西十二个区域,共计 24 个时区格林威治作为全球标准时间即 (GMT 时间 ),东时区以格林威治时区进行加,而西时区则为减. 地球的轨道并非正圆,在加上自转速度逐年递减, ...
Istio 运维实战系列（2）：让人头大的『无头服务』-上
本系列文章将介绍用户从 Spring Cloud,Dubbo 等传统微服务框架迁移到 Istio 服务网格时的一些经验,以及在使用 Istio 过程中可能遇到的一些常见问题的解决方法. 什么是『无头服 ...

day50 Pyhton 前端01

h1~h6

a

img

无序列表ul

只能包裹li

ol有序列表

dl:定义列表

table

form

select

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

随机推荐

热门专题