37. html_01

1. 基本结构

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　# 1.第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　# 3.在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>　　　　　 
</head>
<body>
Avril
<b>Lavigne</b>
</body>
</html>　　　　　　　　　　　　　　　 # 2.HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。

4.在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。

5.在<body>和</body>标签之间的文本是页面的代码体，会被显示在浏览器中。

6.在<b>和</b>标签之间的文本会以加粗字体显示。

2. 标签

2.1 head内标签

(1) style标签

定义css样式的标签

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h {color: aqua}
    </style>
</head>
<body>
<h>avril lavigne</h>
</body>
</html>

style标签给h标签内容添加颜色

(2) link标签

引入外部css文件

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="newcss.css">
</head>
<body>
</body>
</html>

css代码将背景设置为蓝色

2.2 body内标签

(1) 标题标签

h1~h6　　1到6级标题

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>666</h1>
    <h2>666</h2>
    <h3>666</h3>
    <h4>666</h4>
    <h5>666</h5>
    <h6>666</h6>
</body>
</html>

(2)字体系列标签

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <i>斜体</i>
    <b>加粗</b>
    <u>下划线</u>
    <s>删除线</s>
</body>
</html>

(3)文本段落标签

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>孙坚孙策起江左</p>
    <p>袁绍袁术兴河梁</p>
    <p>钟会邓艾分兵进</p>
    <p>汉室江山尽属曹</p>
</body>
</html>

(4)水平分割线、换行符

hr　　水平分割线　　单标签　　

br　　换行符　　　　但标签

(5)行级标签与块级标签

块级标签：占据浏览器的一行

块级标签可以包含行内标签和其他块级标签。　

块级标签可以设置长宽，行内标签不能设置长宽。

常见的块级标签包括：

<div>
<p>（段落）
<h1> 到 <h6>（标题）
<ul>、<ol>（无序列表和有序列表）
<li>（列表项）
<table>（表格）
<hr>（水平线)

行内标签：自身文本多大就占多大

行内标签不能包含块级标签。　　

常见的行内标签包括：
<span>
<a>（超链接）
<img>（图片）
<strong>、<em>（强调）
<label>（表单标签）
<input>、<select>（表单元素）
<br>（换行）

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

(6)img标签

图片标签

<img src="" alt="" title="" height="" width="">

src
　　存放图片的路径(可以是本地也可以是网页链接)　　浏览器无法访问本地绝对路径，只能访问相对路径

alt
　　当图片加载不成功时，加载出的图片描述性信息

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="666.jpg" alt="加载失败">
</body>
</html>

title
　　当鼠标悬浮在图片上面之后，自动展示图片信息

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="https://img0.baidu.com/it/u=2545710015,1474723721&fm=253&fmt=auto&app=138&f=JPEG?w=969&h=800" title="尼古丁·真">
</body>
</html>

height/width
　　高度和宽度
　　当调整其中一个参数时，另一个参数也会等比例缩放；只调整一个参数时，另一个参数可以不写，也可以为auto
　　当调整两个参数而不考虑比例时，就会造成图片的失真

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="1.jpg" height="1000px" >
</body>
</html>

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="1.jpg" height="1000px" width="auto" >
</body>
</html>

(7)a标签

锚点标签，用来定义超链接

<a href="" target="_blank"></a>
<a href="" target="_self"></a>

href
　　href用法一：用来定义需要跳转的连接；a标签中间的内容即为网页上展示的内容，不写则不展示

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com">打开搜索引擎</a>
</body>
</html>

　　href用法二：可以放其他标签的id值，点击即可跳转到对应的标签位置

<a href="" id="d1">顶部</a>
<a href="" id="d2">中间</a>
<a href="" id="d3">底部</a>

<a href="#d1">回到顶部</a>
<a href="#d2">回到中间</a>

target
　　_self ：默认 a 标签是在当前页面完成跳转（不新增页面）
　　_blank ：跳转到新建的标签页（新增页面）

2.3 body内特殊符号

(1)空格&nbsp

每一个 代表一个空格

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>孙坚孙策起江左&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;袁绍袁术兴河梁</p>
</body>
</html>

(2)大于号、小于号

由于大于号和小于号是标签的专用符号，在写文本内容的时候尽量不要直接使用符号 > <

>　　大于号

<　　小于号

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>
        a &gt; b
        a &lt; b
    </p>
</body>
</html>

(3)&符号

&在HTML中有特殊含义，不能直接书写

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>
        a &amp; b
        1 &amp; 2
    </p>
</body>
</html>

(4)￥符号

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>&yen;20000</p>
</body>
</html>

(5)版权符号、注册符号

<!DOCTYPE html>
<html lang="en">　　　　　　　　　　
<head>　　　　　　　　　　　　　　　　
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>hello&copy;hello&reg;</p>
</body>
</html>

(6)乘号、除号

乘号：×，表示方法为 × 或者 ×。
除号：÷，表示方法为÷ 或者 ÷。

posted @ 2024-12-01 17:20 hbutmeng 阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

hbutmeng