1、HTML

1、HTML是什么

超文本标记语言,即学习这门语言就是在一堆标记

2、为何要用?

标记文本

3、如何用?

HTML标签就是用来做记号的,虽然这些记号自带一些样式,但务必忽略掉记号的样式,样式会专用用css来做

HTML标签格式:
标签/元素
标签的语法:
<标签名 属性名="属性值">包含的文本内容</标签名>
<标签名 属性名="属性值" />

只站在html角度,按照能否嵌套子标签,可以将标签分为两大类:
容器类标签:可以嵌套任意其他类型的标签 比如:<div>和</div>
文本类标签:只能嵌套文字、图片、超链接 比如:<br/>、<hr/>、<img src="1.jpg" />等。

几个很重要的属性:
id:定义标签的唯一ID,HTML文档树中唯一
class:为html元素定义一个或多个类名(classname)(CSS样式类名)
style:规定元素的行内样式(CSS样式)

2. HTML文档结构

最基本的HTML文档:
<!DOCTYPE html> 声明为HTML5文档
<html lang="zh-CN"> 是文档的开始标记和结束的标记。
是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
<head> 定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
<meta charset="UTF-8"> 对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码
有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。
<title>css样式优先级</title> 定义了网页标题,在浏览器标题栏显示。
</head>
<body> 之间的文本是可见的网页主体内容。
</body>
</html>

3. 常用标签

1.head内常用标签

<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息

2 body内常用标签

1 基本标签(块级标签和内联标签)

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>

2 特殊字符

空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

3 div标签和span标签

div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

4 img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息"
width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

5 a标签

href属性指定目标网页地址。该地址可以有几种类型:
绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
相对URL - 指当前站点中确切的路径(href="index.htm")
锚URL - 指向页面中的锚(href="#top")
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

6 列表

1.无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性:
disc(实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
2.有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性:
1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>

7 表格

<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>

8 form

功能:
表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性 属性====>描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。

9 input

<input> 元素会根据不同的 type 属性,变化为多种形态。
type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />
属性说明:
name:表单提交时的“键”,注意和id的区别
value:表单提交时对应项的值
type="button", "reset", "submit"时,为按钮上显示的文本年内容
type="text","password","hidden"时,为输入框的初始值
type="checkbox", "radio", "file",为输入相关联的值
checked:radio和checkbox默认被选中的项
readonly:text和password设置只读
disabled:所有input均适用

10 select标签

<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
属性说明:
multiple:布尔属性,设置后为多选,否则默认单选
disabled:禁用
selected:默认选中该项
value:定义提交时的选项值

REFERENCE-LIWENZHOU :http://www.cnblogs.com/liwenzhou/p/7988087.html

11 label标签

<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>

html适配手机

<head>

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />

Python-HTML基础的更多相关文章

  1. Python文件基础

    ===========Python文件基础========= 写,先写在了IO buffer了,所以要及时保存 关闭.关闭会自动保存. file.close() 读取全部文件内容用read,读取一行用 ...

  2. 3.Python编程语言基础技术框架

    3.Python编程语言基础技术框架 3.1查看数据项数据类型 type(name) 3.2查看数据项数据id id(name) 3.3对象引用 备注Python将所有数据存为内存对象 Python中 ...

  3. Python爬虫基础

    前言 Python非常适合用来开发网页爬虫,理由如下: 1.抓取网页本身的接口 相比与其他静态编程语言,如java,c#,c++,python抓取网页文档的接口更简洁:相比其他动态脚本语言,如perl ...

  4. 小白必看Python视频基础教程

    Python的排名从去年开始就借助人工智能持续上升,现在它已经成为了第一名.Python的火热,也带动了工程师们的就业热.可能你也想通过学习加入这个炙手可热的行业,可以看看Python视频基础教程,小 ...

  5. Python爬虫基础之requests

    一.随时随地爬取一个网页下来 怎么爬取网页?对网站开发了解的都知道,浏览器访问Url向服务器发送请求,服务器响应浏览器请求并返回一堆HTML信息,其中包括html标签,css样式,js脚本等.我们之前 ...

  6. 零基础学Python--------第2章 Python语言基础

    第2章  Python语言基础 2.1 Python语法特点 2.11注释 在Python中,通常包括3种类型的注释,分别是单行注释.多行注释和中文编码声明注释. 1.单行注释 在Python中,使用 ...

  7. Python学习基础笔记(全)

    换博客了,还是csdn好一些. Python学习基础笔记 1.Python学习-linux下Python3的安装 2.Python学习-数据类型.运算符.条件语句 3.Python学习-循环语句 4. ...

  8. Python数据分析基础教程

    Python数据分析基础教程(第2版)(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1_FsReTBCaL_PzKhM0o6l0g 提取码:nkhw 复制这段内容后 ...

  9. Python数据分析基础PDF

    Python数据分析基础(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1ImzS7Sy8TLlTshxcB8RhdA 提取码:6xeu 复制这段内容后打开百度网盘手 ...

  10. Python的基础语法(一)

    0. 前言 最近正在重新整理Python的基础知识,以便更好地学习新知识.这一部分主要是讲述Python基础语法的演示.下面的语法都是基于Python3的语法. 1. 注释 注释:Python的注释方 ...

随机推荐

  1. pow log 与 (int)

    1.不能用%d输出double类型的数 double a1=5.3; double a2=1234.1234; double a3=3412341.12341234; double b1=1.5; d ...

  2. Spring核心组件剖析

    简介 Spring框架如今已成为服务端开发框架中的主流框架之一,是web开发者的利器.然而,真正让人着迷的,还是与其实现相关的 原理,设计模式以及许多工程化的思想.本文主要探讨Spring的三大核心组 ...

  3. 洛谷 P3956 棋盘(BFS)

    传送门:Problem P3956 https://www.cnblogs.com/violet-acmer/p/9827010.html 题解: BFS 相关变量解释: color[maxn][ma ...

  4. 惊喜的gift

    情侣的饰品吧!我之前在淘宝上买了一套,挺好的,很好看呢!男的手链,女的项链,手链需要项链的钥匙才能打得开,女孩子应该都会很喜欢的吧!至少我很喜欢!而且价格也不贵,150块人民币都不到,很适合当生日礼物 ...

  5. JSP+MySQL中文乱码

    问题:JSP页面传输到MySQL数据库时,中文为乱码(数据库中存储乱码). 解决办法: 1.将所有的涉及到编码的都设置为 utf8(utf-8). 设置数据库编码:命令行执行:mysql> sh ...

  6. STM32 CAN

    STM32普通型芯片的 CAN 有14组过滤器组(互联型有28组过滤器组) ,用以对接收到的帧进行过滤.每组过滤器包括了2个可配置的32位寄存器:CAN_FxR0和 CAN_FxR1.对于过滤器组, ...

  7. 虚拟化技术之KVM

    虚拟化技术之KVM 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是虚拟化 其实虚拟化技术已经不是一个新技术了,上个世纪六十年代IBM公司已经在使用,只不过后来(上个世纪八 ...

  8. Hbase记录-Hbase shell使用命令

    1.进入hbase shell  执行./bin/hbase shell 2.进入后,help  帮助信息,如可以使用help 'create' 3.创建表:create 'test','cf'  表 ...

  9. div显示提示信息【转】

    div显示提示信息 <body> <style type="text/css"> a.link{position:relative;} a.link div ...

  10. UVALive - 3266 Tian Ji -- The Horse Racing(贪心)

    题目链接 题意 两人赛马,每居获胜得200,平局无事发生,输了也输200.求最优的策略使赢的钱最多. 分析 排序,从最快的开始比,若比不过,则用最弱的消耗最强的.模拟即可. #include<i ...