初识HTML
HTML:超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式。比如字体什么颜色,大小等。
HTML书写规范:不区分大小写
HTML文档组成部分
-
作用:通知浏览器使用的是哪种标准 如:<!doctype html>
-
head (不会在页面上显示)
作用:提供给服务端一些页面的关键信息
标签:<meta name = "" content="">
-
body(显示在页面上)
作用:页面中显示的部分都写在里面
HTML常用标签 (标签都有属性,可以视为对象)
1.排版标签
-
注释标签 <!--注释 -->
-
段落标签 <p> 属性:align="属性值" left center right </p>
-
换行标签 <br> 没有属性、没有结束
-
水平线标签 <hr>
属性:
-
width="500/50%" 长度
-
size = "" 宽度
-
color = "" 颜色
-
align = "" 位置
-
noshade 去除阴影
-
-
居中标签 <center> </center>
-
预定义标签<pre> </pre> 设置浏览器按自定义的格式显示
-
块级标签 <div> </div> 标签中内容作为一个整体来对待
特点:块级标签单独占据一行
属性:
-
align = “”
-
-
行级标签 <span> </span>
特点:行级标签不会换行
2.字体标签
-
标题标签 <h*> </h> h1、h2、h3、h4、h5、h6
-
字体标签 <font> </font>
属性:
-
face = "" 字体类型
-
size = "" 字体大小(1-7)
-
color= "" 颜色
-
-
特殊字符
-
< 小于号
-
  空格
-
> 大于号
-
© 版权
-
&trade 商标
-
-
加粗标签 <b> </b> / <strong> </strong>
-
斜体标签 <i> </i>/ <em> </em>
-
下划线标签 <u> </u>
-
中划线标签 <s> </s>
-
上下标 <sup> </sup> / <sub> </sub>
3.图片标签
-
<img src = "路径" >
src : 路径分为相对路径和绝对路径
-
相对路径:相对当前页面的路径 ../ 表示上一层路径
-
绝对路径:a.以逻辑盘符开始的路径
b.网络路径
属性
-
width = ""
-
height = ""
-
alt = "如没有显示图片,则显示这里面的内容"
-
border = "" 边框
-
title = "" 提示文本(共有属性)
-
4.超链接
文字链接:<a href = "目标地址"> </a>
target属性:告诉浏览器打开目标页面
-
_blank 在新窗口中打开
-
_self 在原来窗口中打开
-
_parent (用于框架)
-
_top (用于框架)
连接形式:
-
外部链接:连接到一个外部文件
-
锚链接:连接到本页或者其他页面的特定位置 <a href = "(若为其他页面,前面加页面名字)#+特定位置名字"> </a>
-
邮件链接:打开邮箱 <a href = "mailto:xxx"> </a>
对图片局部区域加超链(用DW完成)
5.清单列表
-
有序列表 <ol> <li></li> </ol>
属性:
-
type= “ ” 表示列表前面的序号
-
stat = “ ” 开始的序号
-
-
无序列表 <ul> <li></li> </ul>
属性:
-
type = “” 表示列表前面的图标
a. disc 圆点
b. square 方形
c. circle 空心圆点
-
-
定义列表<dl> <dt> <dd> </dd> </dt> </dl>
6.表格标签(一个表格是由行来组成的,一行是由列来组成的)
<table>
<thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tfoot>
</table>
属性:
-
border = "" 边框
-
width = ""
-
hight = ""
-
align = "" 指表格的位置
-
cellpadding = "" 内容到边的距离
-
cellspacing = "" 单元格之间的距离
-
borddercolorlight = ""
-
borddercolordark = ""
-
bgcolor = "" 表格背景颜色
-
background = "" 表格背景图片
合并行:rowspan = ""
合并列:colspan = ""
内嵌框架
内嵌javascript 代码方式:
-
在点击事件中写: onclick = "javascript 代码"
-
<script type = "text/javascript"> javascript 代码 </script>
-
引入外部js文件 <script type = "text/javascript" src = "js文件路径"> </script>
javascript的类型转换
1.把字符串转换为number类型
a.parseInt()/parseFloat()
b.(推荐) *1 如:var a = "123" a = a * 1;
2.把字符串转换为boolean类型
牢记:非0位真,0为假