【一起来烧脑】一步学会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 Cloud Alibaba学习笔记（20） - Spring Cloud Gateway 内置的全局过滤器
参考:https://cloud.spring.io/spring-cloud-static/Greenwich.SR2/single/spring-cloud.html#_global_filter ...
- TCP协议（下）
TCP滑动窗口 发送端 LastByteAcked:第一部分和第二部分的分界线 LastByteSent:第二部分和第三部分的分界线 LastByteAcked + AdvertisedWindow: ...
- java之servlet之文件下载
1.在页面中,可以直接通过超链接来下载: a) 如果浏览器能够打开该文件,那么直接在浏览器中显示---不是想要的效果 b) 任何人都能下载,不能进行权限控制 2.通过servlet来进行下载,在ser ...
- WebSocket 转
即时通信常用手段 1.第三方平台 谷歌.腾讯 环信等多如牛毛,其中谷歌即时通信是免费的,但免费就是免费的并不好用.其他的一些第三方一般收费的,使用要则限流(1s/限制x条消息)要么则限制用户数. 但稳 ...
- Mycat分布式数据库架构解决方案--schema.xml详解
echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 该文件 ...
- HTTP2协议主要改进点
1.改成二进制协议,每次传输二进制帧,帧有以下几个字段 类型type,长度length,flag,StringID流标志,Payload负载,最基础的两种类型HEAD类型和DATA类型 2.多路复用, ...
- FreeRTOS队列操作
API函数 //创建 #if( configSUPPORT_DYNAMIC_ALLOCATION == 1 ) #define xQueueCreate( uxQueueLength, uxItemS ...
- MySQL Hardware--RAID卡常用信息查看
MegaRAID信息查看 #查raid卡信息(生产商.电池信息及所支持的raid级别) /usr/local/sbin/MegaCli -AdpAllInfo -aALL |grep -E " ...
- array_push
array_push() 函数向第一个参数的数组尾部添加一个或多个元素(入栈),然后返回新数组的长度. 该函数等于多次调用 $array[] = $value. 1:即使数组中有字符串键名,您添加的元 ...
- 右键tomcat找不到项目：There are no resources that can be added or removed from the server.
右键Add and Remove找不到项目,会出现下面这个弹框: 之后在项目文件夹上右键(Java Build Path中引用的jdk的版本也需要和下面这个Project Facets中配置的java ...