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 >

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>这是标题 1h1>
<h2>这是标题 2h2>
<h3>这是标题 3h3>
<h4>这是标题 4h4>
<h5>这是标题 5h5>
<h6>这是标题 6h6>

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>
  • 结果显示
    HTML基础-01-头部(<head><title>< base><link><style><meta><script>),区块元素和内联元素_第1张图片

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>
  • 输出
大梦谁先觉
平生我自知
草堂春睡足
窗外日迟迟

你可能感兴趣的:(#,HTML基础教程,html,头部head,内联元素,区块元素,行内元素)