html 第一章：
webde 运行环境:
1. 什么是html
html 是用来描述网页的一种语言。
html 指的是超文本标记语言：hypertext markup languge
超文本 就是网页上不光有文本，还有图片，音乐，视频等
标记语言是一套标签
html 使用标签来描述网页
html 文档包含html标签及文本内容
html文档也叫做web页面，是以html结尾的文件
html的主要目的：通过一系列的标记，来显示网页的不同的效果，不同部分
1. html核心标记
2.1html的文档结构
<html>//告诉浏览器后面代码是html的代码
<head>//告诉浏览器当前网页如何显示，如编码，关键词
</head>
<body>//这里是主体部分
</body>
</html>//结束
<！doctype html>声明文档类型
<meta charset=”utf-8)/>设置当前网页的标题
2.2html的注释
<!-- 写注释内容 -->
当前语句上面写注释，解释下面的一条语句或多条语句
写在语句右边
写代码必须缩进
2.3代码规范
html不区分大小写。建议小写
html标记属性可有可无。
双标签的内容在开始和结束标签之间，单标签没有内容。
html标签可以嵌套，但一定注意是顺序嵌套，外层套内层，一层套一层。
2.4标记的分类
单标记：标记只有一个不是修饰内容的而是显示每个功能的。
语法：<标记名称 属性=“值” 属性2=“值2”/> /结束的这个斜杠可有可无，根据开发要求来
例 ：<img src=”图片在服务器中的地址，盘符/文件夹/文件名”/>
<img src=”d/php/images/01.jpg”/>
双标记：是修饰内容的标记，有开始和结束标记，中间是要修饰的内容
语法：<标记名称 属性=”值”></标记名称>
例: <div> 文本</div>
2.5body的属性
bgcolor:背景颜色 例 ：<body bgcolor=”颜色”>
颜色：单词 十六进制 rgb
background:背景图片 例：<body background=”图片地址”>
2.6文本修饰标记
<font></font> 文本的修饰 例 <font>文本</font>
font 的标记的属性
color：文本的颜色 值：颜色
size:文本的大小 值：1-6
<i><i> 斜体
<b></b> 加粗
<u></u>下划线
<s></s>删除线
<sub></sub>下标
<sup></sup>上标
2.7排版标记
<br /> 换行 ，在需要换行的标签后添加
<hr/>
hr 常用属性
size :粗细 值 -100
color :颜色 值：颜色
width ：宽度 值 ：数值 百分比，根据浏览器 百分比用于响应式开发
标题标记 <h1>---<h6>双标记 自动换行和加粗
<p></p>段落
<pre></pre> 预排版标记
2.8html实体字符
功能：在网页中显示一些特殊字符。如rmb，书名号等。
2.9div 和span 标记
div是双标记，是没有意义的块元素，又用的最多 和css配合使用 一般成为”div+css”
语法 <div>可以放入任何的元素</div>
span 是双标记，是没有任何意义的行内元素，又用最多
语法 <span>要放入的元素</span>
块元素：不管内容有多少都会占整个浏览器的一行。一般用块元素布局。div ul
行内元素：内容多少占多少 ，一般都是行内元素嵌套在块元素中。
元素：一整套标记的组合 <div>这时候可以称为一个元素</div>
标记：div p
3.0无序列表
语法：
<ul>
<li></li>
<li></li>
</ul>
属性：type : 符号类型 值：disc square cicle
3.1有序列表
语法:
<ol>
<li></li>
<li></li>
...........
</ol>
属性：
type：i ,i, 1,
start :数值，从即开始
3.2定义列表
语法：
<dl>
<dt>标题</dt>
<dd>描述</dd>
</dl>
3.3图片标记
语法：<img 属性=“值” 属性=”值“....../>
常用属性：
src :图片的地址 值：具体路径
alt: 来代替图片没有显示时的描述
width：宽度 值：数字
height：高度 值：数字
如果需要按照原来的比例缩小或放大，只设置宽高其中的一个
border：图片的边框 值：数字
align :图片水平对齐方式 值：left|center|right
如果直接给图片添加对齐，是不起作用的
作用1.需要给图片调整位置，可以放入到div中，调整div的对齐方式
作用2.可以使用图片对齐进行图文混排的效果
hspace 左右距离 值：数字
vspace 上下距离 值：数字
3.4图片的热点
功能：在图片中添加可以点击的链接
<img src-”ur路径” usemap=”#图片名称”>
<map narme=”图片名称”>
<area shape ="rect" coords-"251 ,413,413 467" href=" www. baidu com" target" blank?>
<ared shape-"circle" coords= 230304 45”href-"拖动到一个文件以创建链接”>
<area shape="'poly"coords="552,548.646.507597.460.554.448.524.450,524.522"href"
rect:矩形，坐标左上角和右下角
cicle 圆形 坐标 ，中心点和半径
ploy 多边形，坐标；每两个数字为一个点
href :跳转链接的地址
ta'rget:打开链接的方式 值：_blank _self(默认 ) _parent(父窗口-框架) _top(顶级窗口-框架)
3.5滚动标记
语法：<marquee>要滚动的元素</marquee>
常用属性：
direction滚动方向 值：up down left right
width :滚动的宽度
height：滚动的高度
bgcolor:背景颜色
scrolldelay:两步的停留，以毫秒为单位
scrollamount：滚动步长值
loop：滚动次数
3.6多媒体标记
语法：<embed></embed>
常用属性：
src:多媒体的地址 值：路径
width：调整多媒体的宽度 值：数字
height：调整高度 值：数字
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论