Python-web
-
HTML常用标签
HTML
什么是HTML
-
HTML 是用来描述网页的一种语言。
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
-
HTML 不是一种编程语言，而是一种标记语言 (markup language)
-
标记语言是一套标记标签 (markup tag)
-
-
HTML 使用标记标签来描述网页
HTML 标签(元素)
-
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
-
HTML 标签是由尖括号包围的关键词，比如 <html>
-
HTML 标签通常是成对出现的，比如 <b> 和 </b>
-
标签对中的第一个标签是开始标签，第二个标签是结束标签
-
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
-
HTML 文档描述网页
-
HTML 文档包含 HTML 标签和纯文本
-
HTML 文档也被称为网页
-
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
-
浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容.
注意 ：有时候我们也会把标签说成元素，比如
p标签说成p元素，其实说的就是同一个东西，指示说法不同而已。
HTML的模板
<!DOCTYPE html> <!--文档类型-->
<html lang="en"> <!--根标签-->
<head> <!--网页的头部-->
<meta charset="UTF-8" /> <!--国际编码 UTF-8-->
<title>初识HTML</title> <!--网页标题-->
</head>
<body> <!--可视化区域 网页的主体-->
</body>
</html>a
HTML标签
H标题标签
-
h1~h6 -
标题标签 文字大小、粗细程度 、单独占一行 -
一个页面通常只出现一个h1标签 有利于搜索引擎搜索 -
每个页面出现哪些标签，根据自己的需求
p段落标签
-
独占一行
-
前后元素自动换行
粗体标签
-
<strong>/<b>
斜体标签
-
<em>/<i>
特殊符号
| 代码 | 符号 |
|---|---|
< |
< 小于号 |
> |
> 大于号 |
|
空格 |
|
空白位 |
© |
版权符 |
& |
&符号 |
换行
-
<br/>换行符 -
<hr/>水平线
a标签（超链接标签）
<a href="#">#</a> 刷新当前页面 <a href="javascript: void(0);">死链接</a> 死链接，不会跳转 <a href="#name">锚点</a> <a href="http://baidu.com">跳转到百度</a> 跳转到百度 需要注意的是 http 不能少
HTML的书写规范
-
HTML命名规范
-
名字用小写字母
-
以英文开头，可以包含（英文字母 _ - 数字），不能使用中文
-
见名知意
-
驼峰命名，第二个单词大写，例如：
className(js中使用)
-
-
命名的2种方式
-
id只能有一个名字，且在页面中相同的名字只能出现一次，相当于身份证号码一样 -
class相同的名字可以出现N次，并且可以有多个名字，相当于人名字一样
-
图片标签
语法 ：<img src="图片地址"/>
图片要素
-
src定义图片路径 -
alt图片描述，用于seo给搜索引擎抓取 -
width规定宽度 不给值 默认图片多宽就多宽 -
height规定图片高度 不给值 默认图片多高就多高 -
widthheight只给一个值的时候，会等比例缩放
列表
-
无序列表
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
无序列表就是所有的列表项没有先后顺序之分 默认小黑圆点（disc）
可以通过改变type 值来改变前面的小黑圆点(disc) 空心圆(circle) 小方框(square)
-
有序列表
<ol>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ol>
有序列表就是有先后顺序之分 默认是1 2 3
可以通过改变type 值来改变 A 大写字母排序 a小写字母排序 I大写罗马字母排序 i小写罗马字母排序。
H5新增的两个属性：
reversed 降序排序
start 有序列表的其实值
-
定义列表
<dl> <dt>列表标题</dt> <dd>列表项目1</dd> <dd>列表项目2</dd> <dd>列表项目3</dd> </dl>
div 和span标签
div是块级标签，可以包含任何块和行内元素，不会和其他元素同占一行
display:bock默认宽度100%，支持设置宽高，支持所有css命令
span 是内联（行内）标签，可以和其他行内元素位于同一行
display:inline 默认内容撑开宽度，不支持设置宽高
display:inline-block块级可以横排展示，行内支持设置宽高
display:none隐藏元素