HTML学习
HTML学习笔记
第一天
1.超文本标记语言【HypeText Markup Languge 】
Html 纯文本 =》 文本、图片、列表
2.浏览器：
五种： IE Chrome Firefox Opera Safari
内核：Trident Chromiue Gecko Presto WebKit(Blink)
兼容性问题【放一边】，Chrome 上运行
3.开发工具：DW/ subline / WebStrom / Hbuilder / notepad++
4.html网页
标签的讲解
html 开发规范
标签结构：
有始有终，小写规范
内容：
body 分工，内容其中
注释结构：
不要跨行注释，不要嵌套
属性：
键值双引，空格分离
动态网页与静态网页
动态网页【经过服务器解析才能运行的网站（jsp/php/asp.net.....)】
颜色体系：
三元素：
红 0~255 #ff0000
绿 0~255 #00ff00
蓝 0~255 #0000ff
rgb(,,)
rgba(,,,通透度)
颜色单词【red,green,blue/pink........】
HTML的常用标签
a 链接标签 A 英文名anchor
img 图片
ul
ol
dl
table 表格标签
表单标签
form 用来收集用户信息
<!--
注释：ctrl+/
-->
<!-- 声明文档类型 document type -->
<!DOCTYPE html>
<html>
<!-- 称为头部 声明网页相关信息 -->
<head>
<!-- 声明网页采用utf-8的字符编码 -->
<meta charset="utf-8" />
<title>第一个HTML文档</title>
<!-- css javascript -->
</head>
<!-- 主体：展示内容，与用户交互的界面 -->
<body>
<font size="7" color="#ff0000" face="">字体标签</font>
<!--font
size:1-7, 默认是3
face:字体样式【不要乱设置】
在后期会使用css样式来代替
-->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h6>h6</h6>
<b>加粗</b>
<u>下划线</u>
<i>斜体</i>
水的分子式=H<sub>2</sub>O
X的平方 X<sub>2</sub>
<del>删除线</del>
<hr size="20px" width="500px" color="aqua"/ align="left">下划线
<!--align:对齐方式【left,center[默认],right】-->
<p align="left">段落标签</p>
空格
<pre></pre> 原样输出
<!--特殊字符-->
©===》版权
®====》商标注册
>大于
<小于
&(取地址符)字符；
<!--用于页面跳转-->
<a href="http://www.baidu.com" target="_blank">跳转到百度</a>
<!--
href:url链接地址【站外：需要加上请求协议】
如果是站内地址：虚拟路径[../返回当前页面的上一级目录]
页面定位【锚点】
target:打开方式【显示在哪打开】
——blank[在新窗口打开]
——self[当前窗口]、默认
-->
<a href="pages/linkpage.html">演示站内跳转</a>
<!--页面内跳转:定位页面的位置【锚点】-->
<a href="#p1">第一章</a>
<a href="#p2">第二章</a>
<a href="#p3">第三章</a>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<!--图片标签-->
<img src="img/img1.jpg" >
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595245335096&di=64910929c1b43fe3df59b2b02bd671da&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D1518486708%2C3220848572%26fm%3D214%26gp%3D0.jpg"/>
<!--
img:
src:图片地址【站外、站内】
站内：虚拟路径
站外：需要添加请求协议
width:宽度
height：高度
alt:图片加载失败的提示
algin:对齐样式【使用css样式来处理】
-->
</body>
</html>
原样输出标签
<pre>
床前明月光，
疑似地上霜。
</pre>
<!--特殊字符-->
©===》版权
®====》商标注册
>大于
<小于
a标签
1.用于页面内跳转
<a href="http://www.baidu.com" target="_blank">跳转到百度</a>
href:url链接地址【站外：需要加上请求协议】
如果是站内地址：虚拟路径[…/返回当前页面的上一级目录]
页面定位【锚点】
target:打开方式【显示在哪打开】
——blank[在新窗口打开]
——self[当前窗口]、默认
2.站内跳转
<a href="pages/linkpage.html">演示站内跳转</a>
3。页面内跳转:定位页面的位置【锚点】
<a href="#p1">第一章</a>
<a href="#p2">第二章</a>
<a href="#p3">第三章</a>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
img图片标签
img:
src:图片地址【站外、站内】
站内：虚拟路径
站外：需要添加请求协议
width:宽度
height：高度
alt:图片加载失败的提示
algin:对齐样式【使用css样式来处理】
<img src="img/img1.jpg" >
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595245335096&di=64910929c1b43fe3df59b2b02bd671da&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D1518486708%2C3220848572%26fm%3D214%26gp%3D0.jpg"/>
ul标签
ul:
无序列表 unorder list
无序列表使用更频繁【导航】
ul 属性：
type：设置符号【disc|circle|square]
ul与li
单独占一行
ul->li严格的层级关系
li:
list item
ol:
有序列表 order list
网络问卷，在线考试
ol属性：
type：设置序号的样式票【1,A,a,i,I】
start:分段后连接顺序需要
dl:
自定义列表dl defined list
dt:
defined title :自定义标题
dd:
defined data ：自定义数据可以是多个
<!--无序列表 unorder list-->
<!--ul 属性：
type：设置符号【disc|circle|square]
ul与li
单独占一行
ul->li严格的层级关系
-->
<ul>
<li>瓜子</li>
<li>花生</li>
<li>矿泉水</li>
</ul>
<!--有序列表 ol order list-->
<!--ol
属性：
type：设置序号的样式票【1,A,a,i,I】
start:
-->
<ol type="1">
<li>啤酒</li>
<li>饮料</li>
<li>八宝粥</li>
</ol>
<ol type="1" start="4">
<li>啤酒</li>
<li>饮料</li>
<li>八宝粥</li>
</ol>
<!--自定义列表dl defined list-->
<dl>
<!--defined title :自定义标题-->
<dt>标题</dt>
<!--defined data ：自定义数据可以是多个-->
<dd>数据1</dd>
<dd>数据2</dd>
<dd>数据3</dd>
</dl>
上一篇： 关于补水的蔬菜，你都知道哪些
推荐阅读
-
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
-
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
-
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
-
如何让IE9以下版本(ie6/7/8)认识html5元素
-
HTML5 Web Workers之网站也能多线程的实现
-
突袭HTML5之Javascript API扩展3—本地存储全新体验
-
程序设计HTML5 Canvas API
-
h5图片轮播怎么设置（简单html图片轮播）
-
jquery获取url中的参数有哪些（html页面获取url参数）
-
PHP 面向对象程序设计（oop）学习笔记 (五) - PHP 命名空间