文档结构:

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

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

随机推荐

Java格式化字符串Format
java的jdk1.5开始引用了对字符串的格式化处理,类似于C语言的printf("%d,%d",a,b);,对数据的处理非常方便,之所以有这样的方式输出,很多人说是为了抢夺C语言 ...
Spring IoC 到底是什么
前言「上一篇文章」我们对 Spring 有了初步的认识,而 Spring 全家桶中几乎所有组件都是依赖于 IoC 的. 刚开始听到 IoC,会觉得特别高大上,但其实掰开了很简单. 跟着我的脚步,一文 ...
Typora第一次使用
一级标题二级标题三级标题三个# + 空格分割线三个- 三个* 粗体 ctrl + B 斜体 ctrl + I 删除线引用一个大于号就可以了图片: ! + [] + (图片路径) 超链接 ...
Linux驱动之GPIO子系统和pinctrl子系统
前期知识 1.如何编写一个简单的Linux驱动(一)--驱动的基本框架 2.如何编写一个简单的Linux驱动(二)--设备操作集file_operations 3.如何编写一个简单的Lin ...
[LeetCode]Sql系列
题目1 Employee 表包含所有员工信息,每个员工有其对应的 Id, salary 和 department Id. +----+-------+--------+--------------+ ...
springboot之logback配置
参考了https://blog.csdn.net/hxtxgfzs/article/details/79488163 Spring Boot默认情况下,当使用"Starters" ...
【转】Locust性能-零基础入门系列(1)-wait_time属性用法
本篇文章,从局部出发,利用一个简单的测试,来说明场景模拟的wait_time属性的用法.wait_time为什么要单独拎出来讲,是因为它主要有两种模式,而初学者对这两种模式,容易混淆.1) wait_ ...
浅谈SSRF
前言最近主要是在思考考研的事.还是没想好-- 这几天的话写了一篇简单代审投稿了星盟,看了会SSRF.今天简单写下SSRF. 本文所有思路均来自互联网,并没有新想法.仅仅只是做个记录. 本文可能会有大 ...
Docker 容器化部署 Python 应用
Docker 是一个开源项目,为开发人员和系统管理员提供了一个开放平台,可以将应用程序构建.打包为一个轻量级容器,并在任何地方运行.Docker 会在软件容器中自动部署应用程序. 在本篇中,我将介绍如 ...
jpeg编解码概述
本博文为概览性介绍.后面有空了再分几篇博文分别介绍所用到的技术细节. 1.编解码目标编码和解码是个逆过程.jpeg编码的目的在于图形去冗余,进行数据压缩,解码的目的在于还原图像,使能够进行预览. 2 ...

day50 Pyhton 前端01

h1~h6

a

img

无序列表ul

只能包裹li

ol有序列表

dl:定义列表

table

form

select

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

随机推荐

热门专题