【一起来烧脑】一步学会HTML体系
标题图
什么是HTML
HTML是用来描述网页的一种语言 叫超文本标记语言 HTML不是一种编程语言,而是一种标记语言 一套标记标签
使用这些标记标签来描述网页 HTML文档也叫web页面
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
元素
<p>这是一个段落 <a href="default.html">这是一个链接 换行
起始标签 闭合标签
某些 HTML 元素具有空内容
嵌套的HTML元素
<!DOCTYPE html>
<html>
<body>
<p>My first paragraph</p>
</body>
</html>
注:不要忘记结束标签
空的HTML元素
标签定义换行
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭
添加斜杠 比如 <br /> 推荐使用小写,使用小写标签
属性
属性是为HTML元素提供附加信息的
<a href="https://www..com/">This is a link</a>
class classname
设置元素类名
id id
设置元素唯一id
style style_definition
设置元素的行内样式
title text
设置元素的额外信息
标题
<h1> - <h6> 标签进行定义的 <h1> 定义最大的标题。 <h6> 定义最小的标题。
标签在 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文件中对文本进行格式化。
<b> 定义粗体文本 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 定义下标字 定义上标字 <ins> 定义插入字 <del> 定义删除字 <code> 定义计算机代码 <kbd> 定义键盘码 <samp> 定义计算机代码样本 <var> 定义变量 <pre> 定义预格式文本 <address> 定义地址 <abbr> 定义缩写 <bdo> 定义文字方向 <blockquote> 定义长的引用 <q> 定义短的引用语 pre 标签对空行和空格进行控制。
CSS
内联样式 使用"style" 属性
内部样式 使用<style> 元素 来包含CSS
外部引用:使用外部 CSS 文件
<p style="color: pink; margin-left: 30px">
This is a paragraph
</p>
<head>
<style type="text/css">
body {background-color:gray;}
p {color:pink;}
</style>
</head>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
链接
<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>
头部
<head>元素 <title>元素
头部区域的元素标签为: <title>,<style>, <meta>,<link>,<script>,<noscript>, <base>。
<head> 定义关于文档的信息。 <title> 定义文档标题。 <base> 定义页面上所有链接的默认地址或默认目标。 <link> 定义文档与外部资源之间的关系。 <meta> 定义关于 HTML 文档的元数据。 <script> 定义客户端脚本。 <style> 定义文档的样式信息。
每15秒刷线当前网页
<meta http-equiv="refresh" content="15">
定义网页作者
<meta name="author" content="dashu">
定义搜索引擎的关键词
<meta name="keywords" content="HTML, CSS">
定义网页描述内容
<meta name="description" content="免费 Web & 编程 教程">
图像
HTML<img>标签和Src源属性
<img> 是空标签,它只包含属性,并且没有闭合标签。
HTML替换文本属性Alt
<img src=".jpg" alt="da">
<img> 定义图像 <map> 定义图像地图 <area> 定义图像地图中的可点击区域
表格
image.png
<table border="1">
<tr>
<td>第一行,第一列</td>
<td>第一行,第二列</td>
</tr>
<tr>
<td>第二行,第一列</td>
<td>第二行,第二列</td>
</tr>
</table>
HTML表格表头
表格的表头使用 <th> 标签进行定义。
<table> 定义表格 <th> 定义表格的表头 <tr> 定义表格的行 <td> 定义表格单元 <caption> 定义表格标题 <colgroup> 定义表格列的组 <col> 定义用于表格列的属性 <thead> 定义表格的页眉 <tbody> 定义表格的主体 <tfoot> 定义表格的页脚
列表
<ol> 定义有序列表 <ul> 定义无序列表 <li> 定义列表项 <dl> 定义列表 <dt> 自定义列表项目 <dd> 定义自定列表项的描述
区块
HTML块元素 例子:<h1>,<p>,<ul>,<table>。
HTML内联元素 实例: <b>,<td>,<a>,<img>。
<div> 定义文档中的分区或节(division/section)。 <span> 定义 span,用来组合文档中的行内元素。
类
HTML分类块级元素
HTML <div> 元素是块级元素。
HTML行内元素
HTML <span> 元素是行内元素,能够用作文本的容器。
布局
<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>
image.png
框架
什么是框架?
框架将浏览器划分成不同的部分 HTML框架结构标签<frameset>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
HTML内联框架<iframe>
添加iframe的语法
<iframe src="URL"></iframe>
实体
HTML中预留的字符必须被替换为字符实体。
在 HTML 中不能使用小于号(<)和大于号(>),浏览器会误认为它们是标签。
image.png
URL
HTML统一资源定位器
URL 也被称为网址。
因特网协议(IP)地址 URL-统一资源定位器
scheme://host.domain:port/path/filename
scheme :定义因特网服务的类型 host : 定义域主机 domain: 定义因特网域名 port : 定义主机上的端口号 path : 定义服务器上的路径 filename : 定义文档/资源的名称
image.png
Web服务器
托管自己的网站 使用因特网服务提供商(ISP)
颜色
HTML颜色由红色、绿色、蓝色混合而成。
image.png
文档类型
<!DOCTYPE> 声明帮助浏览器正确地显示网页。
image.png
表单
text 定义常规文本输入。 radio 定义单选按钮输入 submit 定义提交按钮 <form> 定义供用户输入的表单 <input> 定义输入域 <textarea> 定义文本域 <label> 定义了 <input> 元素的标签 <fieldset> 定义了一组相关的表单元素 <legend> 定义了 <fieldset> 元素的标题 <select> 定义了下拉选项列表 <optgroup> 定义选项组 <option> 定义下拉列表中的选项 <button> 定义一个点击按钮 <datalist> 指定一个预先定义的输入控件选项列表 <keygen> 定义了表单的密钥对生成器字段 <output> 定义一个计算结果
全局属性
dir 规定元素中内容的文本方向。 accesskey 规定激活元素的快捷键。 draggable 规定元素是否可拖动。 tabindex 规定元素的 tab 键次序。 <!DOCTYPE> 定义文档类型。 <abbr> 定义缩写。 <acronym> 定义只取首字母的缩写。 <aside> 定义页面内容之外的内容。 <article> 定义文章。 <area> 定义图像映射内部的区域。 <bdo> 定义文字方向。 <canvas> 定义图形。 <caption> 定义表格标题。 <code> 定义计算机代码文本。 <command> 定义命令按钮。 <datalist> 定义下拉列表。 <dd> 定义定义列表中项目的描述。 <dialog> 定义对话框或窗口。 <dl> 定义列表。 <dt> 定义列表中的项目。 <video> 定义视频。 <tt> 定义打字机文本。
- Spring框架中的设计模式(五)
- Oracle 12c数据库优化器统计信息收集的最佳实践(二)
- hdu-----(4514)湫湫系列故事——设计风景线(树形DP+并查集)
- hdu----(1402)A * B Problem Plus(FFT模板)
- uva----(100)The 3n + 1 problem
- 程序员你为什么这么累[续]:编码习惯之接口定义
- Python-贝叶斯实战垃圾邮件过滤(大量数据)
- hdu------(3549)Flow Problem(最大流(水体))
- go语言实现http服务端与客户端
- hdu-----(1532)Drainage Ditches(最大流问题)
- LNMP无法删除.user.ini文件的解决方法
- HDU-----(4858)项目管理(模拟)
- hdu-----(4857)逃生(拓扑排序)
- HDU-----(1083)Courses(最大匹配)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Python使用矩阵分解法找到类似的音乐
- SpringBoot集成ELK实现日志收集实践
- python在Scikit-learn中用决策树和随机森林预测NBA获胜者
- R语言:用R语言填补缺失的数据
- R语言如何和何时使用glmnet岭回归
- r语言中对LASSO回归,Ridge岭回归和Elastic Net模型实现
- cmd里如何查看历史命令并执行
- akka-typed(10) - event-sourcing, CQRS实战
- 【每日一题】37. Sudoku Solver
- A quick introduction to innodb_ruby (2.对innodb_ruby的简单介绍)
- Webkit 内核初探
- 配置跨域后,框架帮我们做了什么?
- python应用(1):安装与使用
- TCP粘包和拆包
- 性能测试必备命令(1)- free