HTML-1-CSDN博客

本文链接：https://blog.csdn.net/weixin_41075407/article/details/117459799

HTML-1

1、HTML简介

超文本标记语言: HyperText Markup Language
包括标签及文本内容

2、HTML结构

<html>
<head>
	<title>页面标题</title>
</head>
<body>
	<h1>这是一个标题</h1>
	<p>这是一个段落。</p>
	<p>这是另外一个段落。</p>
</body>
</html>

3、HTML版本

HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML1.0 2000
HTML5 2012
XHTML5 2013

4、<!DOCTYPE>声明

声明HTML的版本，浏览器就能正确显示网页内容。
不分大小写，位置最前
HTML5

<!DOCTYPE html>

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。
HTML5 不是基于 SGML，因此不要求引用 DTD。

5、头部

	**head标签，可插入脚本、样式、元数据信息**

title 标题
base 默认的链接目标，后面链接参照的相对位置
link 定义与外部资源的关系，常用于链接样式表

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

style 定义样式文件的引用位置，也可直接添加样式

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

meta 元数据指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">

http-equiv 表示重定向，content=“跳转前的时间；跳转的目标地址”

script 加载脚本文件

6、标签语法

<标签名> </标签名>
单标签和双标签：
单标签 <标签名/>
双标签 <标签名> 内容</标签名>

标签由标签名、内容（可为空）、属性(一般描述于开始标签)组成

属性：
格式：名值对名=“值”
注意：值在双引号内，若值内部有引号，则外部为单引号

7、常用标签

标题

<h1> 这是一个标题 </h1>
<h2> 这是一个标题 </h2>
<h3> 这是一个标题 </h3>

标题通过h1-h6定义，h1最大，h2最小
浏览器会自动地在标题的前后添加空行
用hgroup标签可以将多个标题标签组合

段落

块级元素 双标签

<p> 这是一个段落</P>

注意：将在段落的前后添加空行
引申：常用br换行标签(单标签)换行

链接

属性：href, target, rel ,id 等
href="#" 代表点击后不跳转，而是回到当前页面的顶部
href="#id" 代表点击后回到id值所在的标签位置
href=“javascript:;” 点击后不作任何变化，占位符

文本格式化标签

加粗：Strong 和 b 标签
斜体：i  和  em 标签

在这里插入图片描述

HTML样式

1、样式加入HTML的方式：

内联样式
在标签内使用style属性
style=“样式名：样式值；样式名：样式值”
内部样式表
在文档head头部内加入style标签包含CSS
外部引用
在文档head内加入link标签引用外部css文件

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

2、常用的样式

字体 font-family:verdana
字体大小 font-size:20px
字体颜色 color:red
背景颜色 background-color:red
文本对齐 text-align:center

图像

img标签，自结束标签，只有属性，替换元素（介于块元素和行内元素之间，具有两者的特点）
1、属性：

src 图像的url地址
./表示当前文件所在的文件夹 …/表示当前文件所在文件夹的上一级文件夹
alt 图像不能显示时的替代图像显示的文本
height 高度更改了高度或宽度后，另一个会等比例缩放
width 宽度

表格

table标签
子标签：

th 表头标签
tr 行标签
td 单元格标签
caption 表格标签，只能放在table标签后
thead 表格的页眉
tbody 表格的主体
tfoot 表格的页脚
colgroup 多个列的组合，在caption之后，在thead,tbody,tfoot,tr之前使用，
子标签col，属性span：包含的列的个数

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

注意：
thead\tbody和tfoot应一起使用
作用：位于多个页面的长表格滚动时，实现表格页眉与页脚固定，表格主体滚动
位置：caption、colgroup 元素之后，tbody、 tfoot 和 tr元素之前。
属性：

边框属性：border=“1”

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

有序列表、无序列表、自定义列表

有序列表
ol 标签，子标签li
无序列表
ul标签，子标签li
自定义列表
项目及注释的组合
dl标签，dt列表项 dd对应列表项的定义

Coffee

- black hot drink

Milk

- white cold drink

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

注意：

列表项内可使用段落、换行符、图片、链接等
有序列表前的编号使用ol的type属性设置，例如type=“A”
无序列表前的编号使用ul的style属性设置，style=“list-style-type:disc”
列表项可嵌套列表

区块

块级元素不管内容多少，都独占一行，默认宽度是父容器的宽度
常与css联合使用
包括：div,p,form,ul,li,dl dd,h1
内联元素（行内元素）和其他元素在一行，宽度是包含的文本或图片的宽度
不可自行设置宽和高
包括：span,a,label,input strong,em

如何布局

常使用div和table(不推荐)进行布局

表单

form标签
子标签：

input 空标签
属性： type，通过属性值设置不同显示
type=“text” 文本
type=“password” 密码
type=“radio” 单选 checked 代表预选
type=“checkbox” 复选 checked 代表预选
type=“button” 按钮 value属性是按钮显示的值
type=“submit” 提交常用属性:method 提交方式，get和post两种
select 下拉列表
子元素：optgroup 下拉选型的组合，属性label为组合名，子元素为option
子元素：option 下拉项
属性：selected = selected 代表预选
disabled=idsabled 禁用下拉列表
mutiple=mutiple 多个选项
name 下拉列表的名称
required 在提交表单前必须选择一个下拉列表中的选项
textarea 文本域
常用属性：rows,cols
fieldset 将表单内的相关元素分组并在外部设边框
属性：disabled=disabled 包含的元素均禁用
name 规定fieldset的名字
子标签：legend 双标签，内容为fieldset分组的组名

内联框架

iframe 标签可在一个窗口显示多个页面

<iframe src="x.html" width="200" heigth="200" frameborder="0"></iframe>

音视频

audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放停止

属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
如果设置了autoplay 则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <!-- 
        audio 标签用来向页面中引入一个外部的音频文件的
            音视频文件引入时，默认情况下不允许用户自己控制播放停止

        属性：
            controls 是否允许用户控制播放
            autoplay 音频文件是否自动播放
                - 如果设置了autoplay 则音乐在打开页面时会自动播放
                    但是目前来讲大部分浏览器都不会自动对音乐进行播放 
            loop 音乐是否循环播放  
     -->
    <!-- <audio src="./source/audio.mp3" controls autoplay loop></audio> -->
    
    <!-- <audio src="./source/audio.mp3" controls></audio> -->


    <!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
    <audio controls>
        <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>

    <!-- 
        使用video标签来向网页中引入一个视频
            - 使用方式和audio基本上是一样的
     -->
    <video controls>
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4">
        <embed src="./source/flower.mp4" type="video/mp4">
    </video>

    <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>


</body>
</html>