Html总结_iframe换行-CSDN博客

本文链接：https://blog.csdn.net/qq_58847780/article/details/128134229

HTML及HTML标签

1.HTML介绍

HTML(Hyper Text Markup Language):

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

2.HTML标签

HTML标签：

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML标签不区分大小写

2.1 标题标签

<!DOCTYPE html>

<html>

<head>

<title>这是第一个网页</title>

</head>

<body>

文档主体

</body>

</html>

1. 上面是一个文档声明

2. 根标签 html

3. html文件主要包含两部分. 头部分和体部分

头部分head: 主要是用来放置一些页面信息

meta标签：设置网页编码

title标签：设置网页标题

体部分body: 主要来放置我们的HTML页面内容

4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成

5. 标签不区分大小写, 建议使用小写

>标题标签：h1~h6，h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

2.2 图片标签

2.3 段落标签

2.4 链接标签

2.4.1 锚点

跳转底部：需要给底部最后一个元素添加唯一标识id，在href里用#id跳转

跳转到自然段：同上，给某个自然段添加唯一标识id，在href里用#id跳转

<!标题标签>

<h1>第一级标题</h1>

<h2>第二级标题</h2>

<h3>第三级标题</h3>

<h4>第四级标题</h4>

<h5>第五级标题</h5>

<h6>第六级标题</h6>

<!图片标签>

<img src="images/sky.jpg" width="120" height="63" title="天空图片" alt="这是一张图片"

border="1" />

属性：

src：表示图片路径，路径：相对路径、绝对路径；相对路径：以当前文件所在位置为基点，绝对路径：从盘

符开始到文件所在位置

width：宽度

height：高度

alt：当图片不能加载时显示在网页上的替代文字

title：当鼠标放到图片上时显示的文字

<!段落标签>

<p>小兔子乖乖</p>

<a href="http://www.baidu.com">点击我跳转到百度</a><br/>

<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>

href:必填，表示要跳转到哪个页面

target:表示窗口在哪儿打开

_blank:在新标签页中打开

_self:在当前标签页中打开，默认值

>跳转顶部：只使用#就可以了

2.5 列表标签

列表标签分为有序列表标签和无序列表标签

2.5.1 有序列表标签

2.5.2 无序列表标签

<!有序列表 OrderList简写ol>

<li>python</li>

</ol>

属性：

type：显示的类型：A、a、I、i、1

start：从第几个开始

>2.6 div标签

最常用块级容器，用来分块，经常与CSS一起使用，来布局网页。

2.7 表格标签

简单的 HTML 表格由 table 标签以及一个或多个 tr、td或th 标签组成。

table：表格

tr ：行

td：列

th：表头列

<!无序列表,UnOrderList简写ul>

<li>python</li>

</ul>

属性：

type：显示的类型：disc实心圆圈、square方块、circle空心圆圈

div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形

成了文档的一个 division。

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。

<div>经常与CSS一起使用，来布局网页。

2.8 表单标签

table 表格

border：表格边框的粗细

width：表格宽度

cellspacing：单元格的间距

cellpadding：单元格填充

tr 行

align：位置，center、left、right

td 列

th 表头列

rowspan：行合并

colspan：列合并

2.9 span标签

2.10 换行标签

2.11 水平线标签

<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提

交按钮等等。

form: 表单标签

action:要访问的资源链接

method：请求方法类型 post、get

input type="text":文本框，文本框名称name必须指定，否则文本框的内容不会提交到服务端

input type="password"：密码框

input type="radio"：单选框，单选框的name必须一致，以实现选择互斥的效果

input type="checkbox"：复选框，复选框的name建议保持一致，这样将来服务端获取到的值是一个数组

input type="submit"：提交按钮

input type="reset"：重置按钮

select: 下拉框

name：下拉框名称，name必须指定，否则文本框的内容不会提交到服务端

option：下拉框的选项，其中value是发给服务端的值，selected是默认选中的项

textarea：多行文本框（或文本域），它的value值就是开始和结束标签之间的内容

<!内容撑开宽度，不能直接控制宽度，没有换行效果>

<br/>

是单标签，开始标签和结束标签是同一个。

>2.12 粗体/斜体/下划线标签

2.13 上标/下标标签

2.14 HTML字符实体

2.15 iframe

iframe：内联框架

iframe在布局、无刷新网页等方面有很重要的地方。虽然现在很流行div布局，但是有时依然会用到iframe布局。

在2005年人们开始使用ajax进行无刷新，但是在一些特效情况下还得使用iframe；特别是在ash动画内嵌套html

时，使用的更多。

<hr/>

是单标签，开始标签和结束标签是同一个。

<!粗体标签>

<!斜体标签>

<i>python</i>

<!下划线标签>

<!上标标签>

数字平方：4<sup>2</sup>

<!下标标签>

水分子化学式：h<sub>2</sub>o

<!空格>

<!大于 greater than>

>;

<!小于 less than>

<;

<!大于等于>

≥;

<!小于等于>

≤;

<!注册商标>

®;

<!版权>

用属性。

3.块元素和行内元素

块级元素：

块级元素（

block element）：在网页中一般通过块级标签来将页面分块，从而达到布局的效果

主要特点如下：

独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布

可以直接控制宽度、高度以及盒子模型的相关CSS属性

在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度

在不设置高度的情况下，块级元素的高度是它本身内容的高度

块级元素什么都能放，但 p 元素里不能放 h1 等分级标题元素

常用的块级元素：

iframe即内联框架。

对于外围的页面，iframe是一个普通的元素，对于iframe里面的内容，又是一个五脏六腑俱全的页面。iframe就是一个

普通的元素，与span、div一样。

那么，iframe是内联元素还是块元素？首先，iframe和canvas标签一样可以设置宽（

width）和高（

height）并且有

效。其次，iframe像普通文本一样不会换行，因此iframe是一个行内块元素（

inlineblock）。

1. frameborder ：是否显示边框，取值 yes ， no；

2. height：框架作为一个普通元素的高度，建议采用css设置；

3. width：框架作为一个普通元素的宽度，建议采用css设置；

4. name：框架的名称，window.frame[name]时专用的属性；

5. scrolling：框架是否带有滚动条，取值 yes ，no ；

6. src ：内框架的地址，可以是页面地址，也可以是图片的地址；

相对一般标签，iframe特别属性只有三个： frameborder，scrolling，src，所有的iframe几乎都要指定。

</iframe>元素

描述

div

最常用块级容器，用来分块，没有语义

一级标题

水平分割线

有序列表

无序列表

列表项

table

表格

段落

form

表单

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

主要特点：

和其他内联元素从左到右在一行显示

不能直接控制宽度、高度以及盒子模型的相关CSS属性，但是直接设置内外边距的左右值是可以的

内联元素的宽高是由本身内容的大小决定（文字、图片等）

内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）

通常被包含在块级元素中

常用的行内元素：元素

描述

锚点

加粗

span

最常用内联元素，划分内联元素里的区

strong

加粗强调

斜体

斜体强调

强制换行

下划线

sup

上标

sub

下标

可替换元素：

根据元素的标签和属性，来决定元素的具体显示内容

img：根据src读取图片信息，并设置图片的宽高，具有行内元素和块级元素的特性

iframe：不会自动换行，是行内元素，可以设置宽高