【一起来烧脑】一步学会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地图,只提供了这四个属性,如果想 ...
随机推荐
- 微信公众号 分享接口 签名通过 分享无效果（JSSDK自定义分享接口的策略调整）
为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK“分享到朋友圈”及“发送给朋友”接口,自定义的分享链接,其域名或路径必须与当前页面对应的公众号JS安全域名一致,否则将调用失 ...
- GOF 的23种JAVA常用设计模式总结 02 UML中的类图与类图之间的关系
统一建模语言UML 统一建模语言(Unified Modeling Language,UML)是用来设计软件蓝图的可视化建模语言,1997 年被国际对象管理组织(OMG)采纳为面向对象的建模语言的国际 ...
- VisualStudio 连接 MySql 实现增删查改
首先创建数据库,建立一个用户登录表 2.visualStudio默认是不支持MySql的,要想通过Ado.Net 操作MySql 需要在管理NeGet包添加对MySql.Data 和 MySql.D ...
- C#中Unity对象的注册方式与生命周期解析
1.示例代码 请详细阅读 static void Main(string[] args) { { Console.WriteLine("----------全局设置----------&qu ...
- UCOSIII系统内部任务
1. 空闲任务 空闲任务是UCOSIII创建的第一个任务 空闲任务是UCOSIII必须创建的 空闲任务优先级总是为OS_CFG_PRIO_MAK-1 空闲任务中不能调用任何可使空闲任务进入等待态的函数 ...
- 解决 Orange Pi 烧录完系统后剩余可用空间过少的问题
输入命令 df -ha 这图是拿别人的 看到系统才使用3.2g,内存卡有16g,不可能满的. 执行命令,加上sudo,防止权限不够: sudo fs_resize 如果上面那个不行的话,试试这个命令( ...
- Centos 端口被占用，kill被占用的进程
1.yum install lsof 2.输入netstat -tln,查看系统当前所有被占用端口 3.根据端口查询进程,输入lsof -i :9555,切记不要忘了添加冒号 4. 既然知道进程号了, ...
- 学习python的日常4
偏函数: 偏函数是functools模块提供的一个功能,偏函数可以通过设定参数的默认值,降低函数调用的难度 其中设定的参数默认值实际上是可以被传入为其他值的,最后创建偏函数时可接收函数对象.*args ...
- Ffmpeg常用转码命令
H264视频转ts视频流 ffmpeg -i test.h264 -vcodec copy -f mpegts test.ts H264视频转mp4 ffmpeg -i test.h264 -vcod ...
- WPF系列——简单绑定学习
1. 绑定到元素对象.(实际项目中用处不大) 界面上两个关联的控件之间绑定,比如一个TextBlock 的FontSize和一个Slider 的Value绑定: <Slider Name=&qu ...