【前端】HTML入门笔记
教程 HTML 指的是超文本标记语言 (Hyper Text Markup Language)、使用标记标签来描述网页
HTML 提示:使用小写标签\属性\属性参考手册\HTML颜色\HTML颜色名
h1:大标题 / <h1> - <h6>
p:文本段落
a:链接(可以是本地网页也可以是互联网上的页面) / <a href="。。。">。。。</a>
*没有下划线的链接 <a href="。。。" style="text-decoration:none">。。。</a>
*新窗口打开链接(target属性): <a href="。。。" target="_blank">。。。</a>
*锚点(name属性):
<p><a href="#C4">查看 Chapter 4。</a></p>
。。。。
<h2><a name="C4">Chapter 4</a></h2>
*电子邮件链接:(要先有邮箱客户端)略
img:图像 /<img src="。。。" width=X height=Y />
注释:<!-- 。。。 -->
pre:标签很适合显示计算机代码
address:在HTML中写地址
del:删除文本 /Jenny
ins:插入文本 /Hui
<br /> 就是没有关闭标签的空元素(<br。。。/> 标签定义换行)。
<hr /> 标签在 HTML 页面中创建水平线。 /hr 元素可用于分隔内容。
实现缩写或首字母缩写:
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
改变文字的方向:
·<bdo dir="rtl">。。。</bdo>
引用:使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。 //q会加上引号
HTML属性:总是在 HTML 元素的开始标签中规定。 /属性值加引号
<h1 align="。。。"> 拥有关于对齐方式的附加信息。 /left、center、right
<body bgcolor="。。。"> 拥有关于背景颜色的附加信息。
<table border="1"> 拥有关于表格边框的附加信息。
文本格式化:b,strong,big,em,i,small,sub,sup
================================
head进行样式设置:
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
内联样式:<p style="color: red; margin-left: 20px"
>。。。</p>
外部样式表:<head><link rel="stylesheet" type="text/css" href="xxx.css">
</head>
内部样式表:
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
====================================================
背景图:<body background="。。。"></body>
插入图,并设置位置:<p>图像 <img src="。。。" align="bottom"> 在文本中</p> /Y轴上的有top,bottom,middle //X轴上的有left,right
为图片显示替换文本(如果图片没了会显示文本信息):<img src="。。。" alt="文本信息" />
图片映射(图像上的某个区域都与超级链接)
====================================================
每个表格由 table 标签开始。每个表格行由 tr 标签开始。每个表格数据由 td 标签开始。 /一个表格一个table,一行一对tr,行内有多少数据,就有多少对td
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
*表格的边框属性:<table border="XX">。。。</table>
*表头:<th>。。。</th>
*空单元格:<td> </td>
*表的标题:<table><caption>XXOO</caption>。。。</table>
*定义跨行或跨列的表格单元格(一个单元格占别的N个行/列):<td colspan="X">。。。</td>、<th rowspan="Y">。。。</th>
*表内的标签:<td><li>A</li><li>B</li><li>C</li></td>
*使用 Cell padding 来创建单元格内容与其边框之间的空白:<table border="X" cellpadding="Y">。。。</table> //cellspacing 变成单线条
*向表格添加背景:<table border="1" bgcolor="red"> //background=“图片路径” //单元格同理
*框架属性:<table frame="。。。">。。。</table> //使用 "frame" 属性来控制围绕表格的边框。 //box、above、below、hsides、vsides
*有序列表:<ol start="X">。。<li>。。</li>。。</ol> //无序用<ul>。。。</ul> //属性<ul type="square/circle/disc/A/a/I">
*定义列表:dl-dt-dd
====================
div:定义文档中的分区或节(division/section)。
span:定义 span,用来组合文档中的行内元素。
*给div配属性id~在头部可对不同的div进行style配置
*div/table都可以对网页布局
============================
表单、输入框:form - <input type="text" name="。。。">
*密码的输入框 - type="password"
*单选按钮(name要一致):<input type="radio" name="。。" value="。。" />
。。。 //复选框 type="checkbox"不用value
*表单的动作属性(Action)和确认按钮:<form name="input" action="跳转页面地址" method="get">
。。。<input type="。" value="。" />
*下拉框:select(属性name) - option(属性value) //<select name="cars"><option value='A'>A</option></select>
默认选中的话加一个属性selected="selected" //checked="checked"
*文本域:<textarea rows="X" cols="Y">文本。。</textarea>
*type:button(属性value)
*在数据周围绘制一个带标题的框:fieldset
*重置:<input type="reset" value="重置">
=============================
框架:竖直、水平
- 框架结构标签(<frameset>)定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
<frameset cols/rows="25%,50%,25%"><frame src="页面路径"></frameset>
*frameset - noresize 属性。框架是不可调整尺寸的。在框架间的边框上拖动鼠标,你会发现边框是无法移动的。
*内联框架 iframe 属性src //<iframe src="/i/eg_landscape.jpg"></iframe>
*iframe边框属性frameborder
*一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C11"> 进行标识。 // <frame src="。。。html#C11">
*使用 iframe 作为链接的目标
iframe 可用作链接的目标(target)。
链接的 target 属性必须引用 iframe 的 name 属性
=================================
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
- 背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
- 背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。
=================================
HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。 //DOCTYPE 参考手册
=================================
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。
*title 元素在所有 HTML/XHTML 文档中都是必需的。
*<base> 标签为页面上的所有链接规定默认地址或默认目标(target)。
*<link> 标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表。
*<style> 标签用于为 HTML 文档定义样式信息。您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式。
*元数据(metadata)是关于数据的信息。<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
=================================
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p>
</body>
*<script> 标签用于定义客户端脚本,比如 JavaScript。script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。
==================================
HTML 中的预留字符必须被替换为字符实体。 //HTML 实体符号参考手册
==================================
如果希望向世界发布您的网站,那么您必须把它存放在 web 服务器上。 //网站主机教程
==================================
HTML Object 元素:<object> 的作用是支持 HTML 助手(插件)。//不是很理解这个
在 HTML 中播放声音的方法有很多种。//可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。
*embed:三个属性width,height,src(插件路径)
*object:三个属性 width,height,data(插件路径)
*<audio> 元素是一个 HTML5 元素:一个属性<audio controls="controls"><source src="。。。.xxx" type="audio/xxx"/></audio>
*使用雅虎播放器(js调用):<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
只需简单地把 MP3 文件链接到您的 HTML 中,JavaScript 会自动地为每首歌创建播放按钮。
*直接使用超链接也可以。(浏览器自带播放器)<a href="。。。">。。。</a>
====================================
<video> 标签的作用是在 HTML 页面中嵌入视频元素。//obejce,embed也可以用
*<video width="320" height="240" controls="controls" autoplay="autoplay"><source src="。。。.xxx" type="video/xxx"/></video>
*在网页中播放视频,那么您可以把视频上传到优酷等视频网站,然后在您的网页中插入 HTML 代码即可播放视频:
<embed src="视频swf地址" width="X" height="Y" type="application/x-shockwave-flash"></embed>
*直接使用超链接也可以。(浏览器自带播放器)<a href="。。。">。。。</a>
=====================================
XHTML 是以 XML 格式编写的 HTML。 /XHTML 指的是可扩展超文本标记语言/XML教程
文档结构
- XHTML DOCTYPE 是强制性的
- <html> 中的 XML namespace 属性是强制性的
- <html>、<head>、<title> 以及 <body> 也是强制性的
元素语法
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭 /空元素也必须关闭
- XHTML 元素必须小写
- XHTML 文档必须有一个根元素
属性语法
- XHTML 属性必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性最小化也是禁止的
如何从 HTML 转换到 XHTML
- 向每张页面的第一行添加 XHTML <!DOCTYPE>
- 向每张页面的 html 元素添加 xmlns 属性
- 把所有元素名改为小写
- 关闭所有空元素
- 把所有属性名改为小写
- 为所有属性值加引号
【前端】HTML入门笔记的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- unity入门笔记
我于2010年4月1日硕士毕业加入完美时空, 至今5年整.刚刚从一家公司的微端(就是端游技术+页游思想, 具体点就是c++开发, directX渲染, 资源采取所需才会下载)项目的前端主程职位离职, ...
- 嵌入式OS入门笔记-以RTX为案例:六.RTX的任务调度
嵌入式OS入门笔记-以RTX为案例:六.RTX的任务调度 上一篇笔记介绍了一些绕开排程器(或调度程序,scheduler)来进行时间管理的一些小方法.这一篇详细介绍RTX的任务调度原理. RTX主要有 ...
- golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web
micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go- ...
- webpack4.*入门笔记
全是跟着示例做的.看下面文章 入门 1.nodejs基础 http://www.runoob.com/nodejs/nodejs-tutorial.html 2.NPM 学习笔记整理 https:// ...
- openresty 前端开发入门五之Mysql篇
openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-my ...
- ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
- [Java入门笔记] 面向对象编程基础(二):方法详解
什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...
- redis入门笔记(2)
redis入门笔记(2) 上篇文章介绍了redis的基本情况和支持的数据类型,本篇文章将介绍redis持久化.主从复制.简单的事务支持及发布订阅功能. 持久化 •redis是一个支持持久化的内存数据库 ...
随机推荐
- javascript Date对象 之 获取时间
javascript Date对象 --> 获取时间: 测试代码: <!DOCTYPE html> <html lang="en"> <head ...
- CSS流体(自适应)布局下宽度分离原则
CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...
- vue2.0过度动画
vue在插入.更新或移除dom时,提供了多种不同方式的应用过度效果. 包括以下工具: 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库,如animate.css 在过渡钩子函数 ...
- 20145222黄亚奇《网络对抗》web安全基础实践
web安全基础实践 实验后回答问题 (1)SQL注入攻击原理,如何防御 原理:指web应用程序对用户输入数据的合法性没有判断,攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语 ...
- python图片文字识别笔记
我的环境为python3 坑比较多,在此做记录,以备查阅 命令行安装: pip install PIL pip install pytesseract pip install Pillow 下载tes ...
- OpenGL核心技术之Gamma校正
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你/2.2次幂.Gamma校正后的暗红色就会成为(0.5,0.0 ...
- React Native常用组件之ScrollView组件
一.前言 从iOS开发的经验来看,scrollView无疑是移动开发中很重要的一个组件,比如后面会学到的ListView就是继承自它.那么,在开发中比如:焦点图.引导页等地方都有其的影子,那接下来我们 ...
- LeetCode——Sum of Two Integers
LeetCode--Sum of Two Integers Question Calculate the sum of two integers a and b, but you are not al ...
- nginx限制ip并发数
nginx限制ip并发数,也是说限制同一个ip同时连接服务器的数量 1.添加limit_zone 这个变量只能在http使用 vi /usr/local/nginx/conf/nginx.conf l ...
- mssqlserver,mysql,oracle分页查询
分页查询语句是sql语句编程中很长见的一个典型应用,用sql语句来分页比一些分页控件的速度要快,所以sql语句的分页在实际编程应用中还是非常广泛的. 今天给大家分享几条不同数据库编程用的分页查询语句. ...