【一起来烧脑】一步学会HTML体系
[外链图片转存失败(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内联元素
实例: ，，，。
定义 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)]
【一起来烧脑】一步学会HTML体系的更多相关文章
- 【一起来烧脑】一步学会JavaScript体系
[外链图片转存失败(img-b0GOhxRY-1563571645197)(https://upload-images.jianshu.io/upload_images/11158618-ba249b ...
- 【一起来烧脑】一步学会CSS3体系
[外链图片转存失败(img-yfi1VPyy-1563434266398)(https://upload-images.jianshu.io/upload_images/11158618-fc8784 ...
- Java基础：三步学会Java Socket编程
Java基础:三步学会Java Socket编程 http://tech.163.com 2006-04-10 09:17:18 来源: java-cn 网友评论11 条 论坛 第一步 ...
- tortoisegit 7步 学会git分支
tortoisegit 7步 学会git分支 做自己的产品,分支还是很重要的.例如,我发布了一个app,但是有bug,又想做新功能,怎么办呢?如果只在一个git上开发的话,bug会越来越多,原来bug ...
- 【一起来烧脑】一步学会TypeScript入门
[外链图片转存失败(img-rmJXMGFs-1563388353181)(https://upload-images.jianshu.io/upload_images/11158618-dd813e ...
- 【一起来烧脑】一步学会AngularJS系统
AngularJS是一个JavaScript框架 一个用JavaScript编写的库 [外链图片转存失败(img-JUTh171K-1563341248796)(https://upload-imag ...
- 【一起来烧脑】一步学会Vue.js系统
Vuejs是一个构建数据驱动的web界面的库,通过api实现响应的数据绑定和组合的视图组件,Vue.js的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单,一旦创建了绑定,DOM 将与数 ...
- 3步学会用gulp
1.安装gulp 安装gulp到全局:npm install -g gulp 安装gulp到某个项目:npm install --save gulp 注意:请先安装nodejs(自带npm) 2.创建 ...
- ios 一步一步学会自定义地图吹出框(CalloutView)-->(百度地图，高德地图,google地图)
前言 在 ios上边使用地图库的同学肯定遇到过这样的问题:吹出框只能设置title和subtitle和左右的view,不管是百度地图还是高德地图还是自带的 google地图,只提供了这四个属性,如果想 ...
随机推荐
- Spring Boot@Component注解下的类无法@Autowired的问题
title: Spring Boot@Component注解下的类无法@Autowired的问题 date: 2019-06-26 08:30:03 categories: Spring Boot t ...
- RequestBody只能读取一次的问题
一.为什么只能读一次 原因很简单:因为是流.想想看,java中的流也是只能读一次,因为读完之后,position就到末尾了. 二.解决办法 思路:第一次读的时候,把流数据暂存起来.后面需要的时候,直接 ...
- Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient报错，问题排查
背景 最近在整合pyspark与hive,新安装spark-2.3.3以客户端的方式访问hive数据,运行方式使用spark on yarn,但是在配置spark读取hive数据的时候,这里直接把hi ...
- VBA文本文件（二十）
还可以读取Excel文件,并使用VBA将单元格的内容写入文本文件.VBA允许用户使用两种方法处理文本文件 - 文件系统对象(FSO) 使用Write命令 文件系统对象(FSO) 顾名思义,FSO对象帮 ...
- iOS - 外加字体（只需三步-教你轻松实现）
外加字体 1.首先info.plist中加入属性Fonts provided by application,在item 0 处填写导入的ttf文件名 eg: <key>UIAppFonts ...
- JavaScript箭头函数中的this详解
前言 箭头函数极大地简化了this的取值规则. 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () { console.log(" ...
- 如何让django模型中的字段和model名显示为中文
如何让django模型中的字段和model名显示为中文:在模型中加入class Meta即可 class People(models.Model): name = models.CharField(n ...
- 【kafka】安装部署kafka集群（kafka版本：kafka_2.12-2.3.0）
3.2.1 下载kafka并安装kafka_2.12-2.3.0.tgz tar -zxvf kafka_2.12-2.3.0.tgz 3.2.2 配置kafka集群 在config/server.p ...
- mysql学习之基础篇01
大概在一周前看了燕十八老师讲解的mysql数据库视频,也跟着学了一周,我就想把我这一周所学的知识跟大家分享一下:因为是第一次写博客,所以可能会写的很烂,请大家多多包涵.文章中有不对的地方还请大家指出来 ...
- 将Maven项目部署云服务器流程
1.数据库分离,存入项目: 2.将分离出的数据库导入云端服务器 将sql文件上传到服务器中 进去云端数据库输入命令:source 云服务器中sql文件地址 3.设置两种配置,修改匹配: 4.mave ...