【一起来烧脑】一步学会HTML体系

it2022-05-05  162

[外链图片转存失败(img-zk4xNuy1-1563431241992)(https://upload-images.jianshu.io/upload_images/11158618-4e9cac1478aa949a.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

什么是HTML

HTML是用来描述网页的一种语言 叫超文本标记语言 HTML不是一种编程语言,而是一种标记语言 一套标记标签

使用这些标记标签来描述网页 HTML文档也叫web页面

声明为 HTML5 文档 元素是 HTML 页面的根元素 元素包含了文档的元(meta)数据 元素描述了文档的标题 元素包含了可见的页面内容

元素定义一个大标题

元素定义一个段落

元素

这是一个段落 这是一个链接 换行

起始标签 闭合标签

某些 HTML 元素具有空内容

嵌套的HTML元素

<!DOCTYPE html> <html> <body> <p>My first paragraph</p> </body> </html>

注:不要忘记结束标签

空的HTML元素

标签定义换行

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭

添加斜杠 比如 推荐使用小写,使用小写标签

属性

属性是为HTML元素提供附加信息的

<a href="https://www..com/">This is a link</a> class classname 设置元素类名 id id 设置元素唯一id style style_definition 设置元素的行内样式 title text 设置元素的额外信息

标题

-

标签进行定义的

定义最大的标题。

定义最小的标题。
标签在 HTML 页面中创建水平线。

注释写法如下:

实例:

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

<html> 定义 HTML 文档 <body> 定义文档的主体 <h1> - <h6> 定义 HTML 标题 <hr> 定义水平线 <!--...--> 定义注释

段落

<p> 定义段落。 <br/> 插入单个折行(换行)。

样式

style属性

<center> 定义居中的内容 <font> 和 <basefont> 定义 HTML 字体 <s> 和 <strike> 定义删除线文本 <u> 定义下划线文本

align 定义文本的对齐方式 bgcolor 定义背景颜色 color 定义文本颜色

HTML背景颜色

background-color 属性为元素定义了背景颜色。 font-family、color 以及 font-size text-align 属性规定了元素中文本的水平对齐方式

格式化

在一个HTML文件中对文本进行格式化。

定义粗体文本 定义着重文字 定义斜体字 定义小号字 定义加重语气 定义下标字 定义上标字 定义插入字 定义删除字 定义计算机代码 定义键盘码 定义计算机代码样本 定义变量

定义预格式文本 定义地址 定义缩写 定义文字方向 定义长的引用 定义短的引用语 pre 标签对空行和空格进行控制。 ## CSS 内联样式 使用"style" 属性 内部样式 使用 ```

链接

<a href="url">链接文本</a>

href 属性规定链接的目标。 HTML链接Target属性

<a href="https://www..com/" target="_blank"></a>

HTML链接Name属性

Name属性规定锚(anchor)的名称。

<a name="tip">有用的提示部分</a> <a href="#tip">访问有用的提示部分</a>

头部

元素 元素

头部区域的元素标签为: ,

定义关于文档的信息。 定义文档标题。 定义页面上所有链接的默认地址或默认目标。 定义文档与外部资源之间的关系。 定义关于 HTML 文档的元数据。 </meta></link></base>

每15秒刷线当前网页

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

定义网页作者

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

定义搜索引擎的关键词

<meta name="keywords" content="HTML, CSS">

定义网页描述内容

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

图像

HTML标签和Src源属性

是空标签,它只包含属性,并且没有闭合标签。

HTML替换文本属性Alt

<img src=".jpg" alt="da">

定义图像 定义图像地图 定义图像地图中的可点击区域

表格

[外链图片转存失败(img-ibsjdpX7-1563431241996)(https://upload-images.jianshu.io/upload_images/11158618-fbe7cec91d972760.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

<table border="1"> <tr> <td>第一行,第一列</td> <td>第一行,第二列</td> </tr> <tr> <td>第二行,第一列</td> <td>第二行,第二列</td> </tr> </table>

HTML表格表头

表格的表头使用 标签进行定义。

定义表格 定义表格的行 定义表格列的组 定义用于表格列的属性 定义表格的页眉 定义表格的主体 定义表格的页脚 定义表格的表头 定义表格单元 定义表格标题

列表

定义有序列表 定义无序列表 定义列表项 定义列表 自定义列表项目 定义自定列表项的描述

区块

HTML块元素 例子:

,。

HTML内联元素 实例: ,,。

定义文档中的分区或节(division/section)。 定义 span,用来组合文档中的行内元素。

HTML分类块级元素

HTML

元素是块级元素。

HTML行内元素

HTML 元素是行内元素,能够用作文本的容器。

布局

<body> <div id="container" style="width:600px"> <div id="header" style="background-color:pink;"> <h1 style="margin-bottom:0;">主题</h1></div> <div id="menu" style="background-color:#CAC7EF;height:200px;width:100px;float:left;"> <b>menue</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#FEF266;height:200px;width:400px;float:right;"> 内容</div> <div id="footer" style="background-color:#96B97D;clear:both;text-align:center;"> 版权 ©.com</div> </div> </body> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:pink;"> <h1>主题</h1> </td> </tr> <tr> <td style="background-color:#CAC7EF;width:100px;vertical-align:center;"> <b>menue</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#FEF266;height:200px;width:400px;vertical-align:center;text-align:center;"> 内容</td> </tr> <tr> <td colspan="2" style="background-color:#96B97D;text-align:center;"> 版权 ©.com</td> </tr> </table> </body>

[外链图片转存失败(img-2vBufXOq-1563431242000)(https://upload-images.jianshu.io/upload_images/11158618-73ab5b76abb7d82a.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

框架

什么是框架?

框架将浏览器划分成不同的部分 HTML框架结构标签

<frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset>

HTML内联框架

添加iframe的语法

<iframe src="URL"></iframe>

实体

HTML中预留的字符必须被替换为字符实体。

在 HTML 中不能使用小于号(<)和大于号(>),浏览器会误认为它们是标签。

[外链图片转存失败(img-4mv0hlWU-1563431242006)(https://upload-images.jianshu.io/upload_images/11158618-0c073221e58059b4.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

URL

HTML统一资源定位器

URL 也被称为网址。

因特网协议(IP)地址 URL-统一资源定位器

scheme://host.domain:port/path/filename

scheme :定义因特网服务的类型 host : 定义域主机 domain: 定义因特网域名 port : 定义主机上的端口号 path : 定义服务器上的路径 filename : 定义文档/资源的名称

[外链图片转存失败(img-QdhGwTaR-1563431242008)(https://upload-images.jianshu.io/upload_images/11158618-797d0f038ce82fe3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

Web服务器

托管自己的网站 使用因特网服务提供商(ISP)

颜色

HTML颜色由红色、绿色、蓝色混合而成。

[外链图片转存失败(img-hF1ASOMb-1563431242009)(https://upload-images.jianshu.io/upload_images/11158618-71f5fd5dae38f708.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

文档类型

声明帮助浏览器正确地显示网页。

[外链图片转存失败(img-Wy5HV3ig-1563431242009)(https://upload-images.jianshu.io/upload_images/11158618-238242bf1c8cc5c9.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

表单

text 定义常规文本输入。 radio 定义单选按钮输入 submit 定义提交按钮

定义供用户输入的表单 定义输入域 定义文本域 定义了 元素的标签 定义了一组相关的表单元素 定义了 元素的标题 定义了下拉选项列表 定义选项组 定义下拉列表中的选项 定义一个点击按钮 指定一个预先定义的输入控件选项列表 定义了表单的密钥对生成器字段 定义一个计算结果

全局属性

dir 规定元素中内容的文本方向。 accesskey 规定激活元素的快捷键。 draggable 规定元素是否可拖动。 tabindex 规定元素的 tab 键次序。

定义文档类型。

定义缩写。 定义只取首字母的缩写。

定义页面内容之外的内容。 定义文章。 定义图像映射内部的区域。 定义文字方向。 定义图形。 定义表格标题。 定义计算机代码文本。 定义命令按钮。 定义下拉列表。 定义定义列表中项目的描述。 定义对话框或窗口。 定义列表。 定义列表中的项目。 定义视频。 定义打字机文本。

请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达叔小生的简书!

这是一个有质量,有态度的博客

[外链图片转存失败(img-tLKmFqBY-1563431242011)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

程序员哆啦A梦 认证博客专家 博客专家 简书万粉优秀创作 掘金优秀作者 我是程序员哆啦A梦,蓝胖子,简书万粉优秀创作者,掘金优秀作者、博客专家,云+社区社区活跃作者,致力于打造一系列能够帮助程序员提高的优质文章。网站@http://www.dadaqianduan.cn

最新回复(0)