HTML整理01

HTML

HyperText Mark-up Language(超文本标记语言)
标记出网页中的内容给浏览器解析

HTML的语法

注释

<!-- 注释内容 -->
用来对代码进行解释，给自己或者团队成员看！
文档声明

<!doctype html>

作用：告诉浏览器以标准模式解析代码！

标签

单标签

<标签名 />
<img />
<hr />
<br />
<input />

双标签

<标签名>内容</标签名>
<h1>标题</h1>

属性

属于标签的一部分，作用是对标签进行一种补充

<标签名 属性名="值"></标签名>
<h1 style="color:red"></h1>
<img src="" width="200" style="width:100px">

主体结构

文档声明
HTML标签
head头
body体
title 标题
meta 设置字符集编码
编码不统一会导致中文乱码
1. 文件编码
2. meta标签设置编码
3. 浏览器设置编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

 

放在head头里面的标签

title 设置网页标题

<title>Document</title>

meta 定义网页的元信息


属性：

charset 设置网页字符集，值一般设置为utf-8

<meta charset="UTF-8">

content 定义其他属性相关的元信息

name 将content的值关联到一个名称
值：
author 设置网页的作者

<meta content="泷泽老师" name="author" />

keywords 设置网页关键字

<meta content="航母驾照培训,火箭开发培训,太空导游培训" name="keywords">

description 设置网页描述

<meta content="泷泽老师" name="author" />

http-equiv 设置http头部信息
值：
content-type 设置网页内容类型

<meta content="text/html;charset=utf-8" http-equiv="content-type" />

 


refresh 设置页面自动刷新或者跳转
例：3秒后跳转到百度：

 <meta content="3;url=http://www.baidu.com" http-equiv="refresh" />

link标签 设置外部文件与本文档的关系
作用：
1. 加载外部css文件
2. 加载标题栏的小图标
例：

        <link rel="icon" href="../pre/02/1.png" />
        <link rel="stylesheet" href="./1.css" />

放在body里面的标签

标题标签 h1~h6 h1最大，h6最小

首部中国城市创新竞争力蓝皮书出炉，北京城市创新竞争力全国最强
    <h1>首部中国城市创新竞争力蓝皮书出炉，北京城市创新竞争力全国最强</h1>
    <h2>首部中国城市创新竞争力蓝皮书出炉，北京城市创新竞争力全国最强</h2>
    <h6>首部中国城市创新竞争力蓝皮书出炉，北京城市创新竞争力全国最强</h6>

段落标签 p

粗体标签 b
strong 表示重要，以粗体显示

<p>日前，社会科学文献出版社出版的首部《中国城市创新竞争力发展报告（<strong>2018</strong>）》蓝皮书显示，
今年，北京、上海、深圳位列中国城市创新竞争力前三。在五个一级指标中，<b>北京</b>的创新环境竞争力、
创新投入竞争力、创新可持续发展竞争力均在全国排第一。</p>

斜体标签 i

<i>2018</i>

em 表示强调，以斜体显示

<em>2018</em>

sub 下标
sup 上标

3<sup>3</sup>
w<sub>2</sub>b

按钮标签 button

<button>按钮标签</button>

bdo 可以修改文本的显示方向
属性： dir
值：rtl right to left 从右到左
ltr left to right 默认从左到右

<bdo dir="rtl">上海自来水来自海上</bdo>

del 删除标签，会在文本中间加横线
u 下划线标签，会给文本加下划线

原价<del>199</del>,限时优惠<u>198</u>

实体字符

在HTML里面，某些字符是预留的，预留的字符都有相对应的实体
&nbsp;    空格
&lt;         小于号 <
&gt; 　　大于号 >
&copy;    版权符号

无序列表 ul 前面的符号是实心小圆点
有序列表 ol 前面的符号是阿拉伯数字
li标签 定义列表项

<ul>
        <li>120周年座谈会上发表讲话</li>
        <li>科幻大咖亮相2018科幻大会主题演讲分享神奇与奥秘</li>
        <li>广州“善行者”公益徒步在穗举行 逾2000人挑战50公里徒步</li>
    </ul>

    <ol>
        <li>广州“善行者”公益徒步在穗举行 逾2000人挑战50公里徒步</li>
        <li>广州“善行者”公益徒步在穗举行 逾2000人挑战50公里徒步</li>
        <li>广州“善行者”公益徒步在穗举行 逾2000人挑战50公里徒步</li>
        <li>广州“善行者”公益徒步在穗举行 逾2000人挑战50公里徒步</li>
    </ol>

 

posted @ 2018-11-25 20:00  街特闷  阅读(121)  评论(0)    收藏  举报