中的标签| 标签 | 说明 |
|---|---|
| 定义网页的标题 |
| 定义网页的基本信息(供搜索引擎) |
| 定义CSS样式 |
| 链接外部CSS文件或脚本文件 |
| 定义脚本语言 |
| 定义页面所有链接的基础定位(用得很少) |
标签浏览器标签页的标题

标签 是对文档起到解释和说明的作用
<meta name = "" content = "" />
meta 是标签的名字,name 和 content 是 meta 标签的属性。
不同的属性值代表不同的含义:
keywords 是 name 属性的属性值,代表整个页面的关键字,搜索引擎会收录这些关键词。description 是 name 属性的属性值,代表页面的描述性信息。乱码问题,因为浏览器查看 HTML 文档时候所使用的编码与 HTML 文档原来的编码不一致造成的。
<meta charset = "utf-8" />
中的标签标题标签,定义文档标题
~
<h1>一级标题h1>
<h2>二级标题h2>
段落标签,定义了一个单独的段落(自动换行,两段隔行)
多行 HTML 内容浏览器解析时会忽略换行
<p>段落1p>
<p>段落2p>
HTML 中,换行回车符在代码中有效,但是浏览器中无效。想在浏览器中实现换行效果需要使用

利用标签 来实现水平线的效果

超文本连接,能够实现从一个页面跳转到另外一个页面,也就是URL 跳转
双标签
标签中文字,显示在页面中
标签内部有属性,属性有属性值
href属性
使用 href 属性指定页面跳转的地址
target 属性
说明浏览器是否在新的标签页打开超链接,
默认在当前页面打开
target=""
新的页面打开:
target="_blank"
例
<a href="http://4399.com">百度a>

默认本页弹出链接页面

<a href="http://4399.com" target="_blank">百度a>
新页面弹出

![]()
标签在HTML 网页中插入图片,可以利用 标签来实现。在引入图片的时候,需要指明图片的来源
发起的是GET 请求
使用src 属性,指定图片的路径:
图片大小
width 和heigth 指定图片的宽和高,单位是像素(px)。当仅指定图片宽高其中一种属性的时候,图片会等比例缩放。也可以用百分比的形式指定宽高,宽高相对于父元素来说的
当图片获取失败时会显示 alt 中的内容
例
相对路径

url 绝对路径

图片丢失

盒模型是HTML 中,重要的一种模型,所有的元素(标签)都可以看做是一个盒子,拥有外边距,边框,内边距,内容。
margin
border
padding
content
居中,相对于父元素居中,是相对的概念。在父元素中设置居中属性,作用于子元素。
解决乱码问题 设置前 设置后<html>
<head>
<meta charset="utf-8">
head>
<body>
<h1>引入图片h1>
<h1>hello worldh1>
<div style = "text-align: center;">
<img src="./img/bd_logo.png" border="0">
div>
body>
html>

span 标签
内联元素,与子元素同宽。<html>
<head>
<meta charset="utf-8">
head>
<body>
<h1>My Name is <span style = "color:pink;background-color: aqua;">GJLspan>!h1>
body>
html>

注意
常用标签练习
title
<head>
<title>testtitle>
head>

meta

<html>
<head>
<meta charset="utf8">
<title>testtitle>
head>
<body>
乱码
body>
html>

标题标签
<html>
<head>
<meta charset="utf8">
<title>testtitle>
head>
<body>
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>无级标题h5>
<h6>六级标题h6>
body>
html>

p
<html>
<head>
<meta charset="utf8">
<title>testtitle>
head>
<body>
<p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段p>
<p>第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段p>
<p>第三段第三段第三段第三段第三段第三段p>
body>

<html>
<head>
<meta charset="utf8">
<title>testtitle>
head>
<body>
第一行<br>第二行<br />第三行
body>
html>

<html>
<head>
<meta charset="utf8">
<title>testtitle>
head>
<body>
第一行<hr>第二行<hr />第三行
body>
html>

<html>
<head>
<meta charset="utf8">
<title>testtitle>
head>
<body>
<a href="http://www.4399.com">百度a>
body>
html>

点击后跳转到 herf 中的网址

<html>
<head>
<meta charset="utf8">
<title>testtitle>
head>
<body>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.0M2zkDUGABaYNcg0NICwrwHaHT?pid=ImgDet&rs=1" alt="图片丢失">
body>
html>

当图片链接的图片无法访问时,会显示 alt 中的内容

<html>
<head>
<meta charset="utf8">
<title>testtitle>
head>
<body>
<div style="background-color: pink;color: blue;">粉底蓝字<br>第二行div>
<div style="background-color: black;color: white;">黑底白字div>
body>
html>

<html>
<head>
<meta charset="utf8">
<title>testtitle>
head>
<body>
<span style="background-color: pink;color: blue;">粉底蓝字<br>第二行span>
<span style="background-color: black;color: white;">黑底白字span>
body>
html>
