HTML基础-01-头部（＜head＞＜title＞＜ base＞＜link＞＜style＞＜meta＞＜script＞），区块元素和内联元素

1. 简单应用

1.1 第一个页面

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

1.2 注释

 <!-- 这是一个注释 -->

1.3 水平线 < hr >

 <p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

2. 头部 < head >

2.1 < title >元素

一共6级标题

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运维开发玄德公(runoob.com)</title>
</head>
<body>
 
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
 
</body>
</html>

2.2 < base > 元素

默认超链接的链接地址

 <head>
<base href="https://blog.csdn.net/xingzuo_1840" target="_blank">
</head>

2.3 < link > 元素

定义了文档与外部资源之间的关系。
标签通常用于链接到样式表

 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.4 < style > 元素

定义了HTML文档的样式文件引用地址或直接添加样式来渲染 HTML 文档。
将在css中有详细描述。

 <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

2.5 < meta > 元素

meta标签描述了一些基本的元数据，不显示在页面上，但会被浏览器解析。
通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

为搜索引擎定义关键词

 <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

 <meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

 <meta name="author" content="LiuBei">

每30秒钟刷新当前页面:

 <meta http-equiv="refresh" content="30">

2.6 < script > 元素

用于加载脚本文件（如： JavaScript）

3. 区块元素和内联元素（行内元素）

3.1 区块元素

特点

每个元素独占一行，默认情况下宽度等于父元素的宽度
不设置高度时，高度为0，有内容时高度由内容撑开，不解析换行符
可以设置width、height、margin、padding属性
dispaly:block

常用的区块元素

div（盒子）、 address（定义地址）
ul（无序列表）、ol（有序列表）、li（列表的项）
dl（定义列表）、dd（定义列表中定义条目）、dt（定义列表中的项目）
p（段落）、h1~h6（网页中的标题，从大到小）
table（表格）、td（标准单元格)、tr（行）、th(表头单元格)
form（表单）、pre（预格式化文本）、hr（分割线）
caption （表格标题）、thead(表格表头)、tbody（表格主体）

区块元素示例

代码

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>蜀</title>
</head>
 
<body>
 
  <p>块外的元素</p>
 
  <div style="color:#0000FF">
    <h3>块内 标题。</h3>
    <p>块内段落</p>
  </div>
 
</body>
 
</html>

结果显示

3.2 内联元素

特点

相邻的元素会排列在同一行，排不下时会自动换行
不支持宽高属性，宽高完全由内容撑开，会解析换行符
使用部分样式会出错（上下margin和padding等）,只能设置margin-left、margin-right、padding-left、padding-right.(可以出现效果)
dispaly:inline

常见的内联元素

span（行间元素）、textarea（多行文本输入控件）
b（加粗）、strong（加重）、i（斜体）、em（着重）
sub（下标）、sup（上标）
ins（插入）、del（删除）、br（换行）、a（定义锚以及超链接）
img（图片）、input（表单项）、label（表单标记）
big（大号字体加粗）、small9(呈现小号字体效果）
code（定义计算机代码文本）、q（定义短的引用）、select（下拉菜单）

内联元素示例

代码

 <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>
 
<p>孙权 
	<span style="color:green;font-weight:bold">碧眼</span>
	<span style="color:red;font-weight:bold">红胡子</span>
</p>
 
</body>
</html>

显示

4. 几个简单示例

4.1 段落 < p >

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-宋</title>
</head>
<body>
 
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
 
</body>
</html>

4.2 分行 < br >

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三顾茅庐</title>
</head>
<body>
 
<p>大梦谁先觉<br>平生我自知<br>草堂春睡足<br>窗外日迟迟</p>
 
</body>
</html>

输出

 大梦谁先觉
平生我自知
草堂春睡足
窗外日迟迟

posted on 2022-03-15 19:45 运维开发玄德公阅读(9) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· HTML基础-03-CSS概述（常用属性、内联样式、内部样式、外部样式）

· CSS基础-01选择器和样式（id选择器、class选择器、内联样式、内部样式表、外部样式表、多重样式优先级）

· 今日总结：html区块

· HTML基础

· HTML详解、HTML标签分类

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）

HTML基础-01-头部（＜head＞＜title＞＜ base＞＜link＞＜style＞＜meta＞＜script＞），区块元素和内联元素

文章目录

1. 简单应用

1.1 第一个页面

1.2 注释

1.3 水平线 < hr >

2. 头部 < head >

2.1 < title >元素

2.2 < base > 元素

2.3 < link > 元素

2.4 < style > 元素

2.5 < meta > 元素

2.6 < script > 元素

3. 区块元素和内联元素（行内元素）

3.1 区块元素

特点

常用的区块元素

区块元素示例

3.2 内联元素

特点

常见的内联元素

内联元素示例

4. 几个简单示例

4.1 段落 < p >

4.2 分行 < br >

导航

统计

合集

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>文档标题</title>
	</head>

	<body>
	文档内容......
	</body>

	</html>

	<p>这是一个段落。</p>
	<hr>
	<p>这是一个段落。</p>
	<hr>
	<p>这是一个段落。</p>

	<head>
	<base href="https://blog.csdn.net/xingzuo_1840" target="_blank">
	</head>

	<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
	</head>

	<head>
	<style type="text/css">
	body {background-color:yellow}
	p {color:blue}
	</style>
	</head>

	大梦谁先觉
	平生我自知
	草堂春睡足
	窗外日迟迟