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规定图片高度 不给值 默认图片多高就多高

  • width height 只给一个值的时候，会等比例缩放

列表

  • 无序列表

<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隐藏元素