文档结构:

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

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

随机推荐

c++基础写二进制文件
问题描述有许多数据待拟合,需要从 root 中提取出来,写成文本文件数据量过大,想转成二进制文件. 解决 #include "TString.h" #include " ...
关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案
原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...
liunx配置本地yum源和更新aliyun yum源
1.挂载DVD光盘到/mnt 因为配置时候路径名里面不能有空格,否则不能识别 [root@ mnt]# mount /dev/cdrom /mnt [root@ mnt]# umount ...
softmax交叉熵损失函数求导
来源:https://www.jianshu.com/p/c02a1fbffad6 简单易懂的softmax交叉熵损失函数求导来写一个softmax求导的推导过程,不仅可以给自己理清思路,还可以造福 ...
firewalld 防火墙
firewalld防火墙 firewalld简述 firewalld:防火墙,其实就是一个隔离工具:工作于主机或者网络的边缘对于进出本主机或者网络的报文根据事先定义好的网络规则做匹配检测,对于能够 ...
RXJAVA源码之多线程
在不指定线程的情况下, RxJava 遵循的是线程不变的原则,即:在哪个线程调用 subscribe(),就在哪个线程生产事件:在哪个线程生产事件,就在哪个线程消费事件.如果需要切换线程,就需要用到 ...
SpringBoot框架：使用mybatis连接mysql数据库完成数据访问（二）
一.导入依赖包 1.在创建项目时勾选: 勾选SQL中的JDBC API.MyBatis Framework.MySQL Driver,创建项目后就会自动配置和引入这些包. 2.在pom.xml文件中添 ...
代码检查工具 Sonar 安装&使用
本文主要说明Sonar的安装方式并附上依赖安装包,本文目标只实现本地搭建测试的Sonar环境,以及本地的测试项目的非定制化扫描本机测试环境:Win10-X64,.vs2017 依赖包: 1 ...
Python爬取天气预报，Ta的城市开始降温了
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资 ...
浅入webpack
webpack.base.conf---webpack基础配置: f利用各种文件对项目中的文件进行处理利用loader,preloader对工程文件进行处理,输出新的工程文件(options中对文件 ...

day50 Pyhton 前端01

h1~h6

a

img

无序列表ul

只能包裹li

ol有序列表

dl:定义列表

table

form

select

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

随机推荐

热门专题