初识HTML

初识HTML

HTML:超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式。比如字体什么颜色,大小等。

HTML书写规范:不区分大小写

HTML文档组成部分
  1. 文档声明

    作用:通知浏览器使用的是哪种标准 如:<!doctype html>

  2. head (不会在页面上显示)

    作用:提供给服务端一些页面的关键信息

    标签:<meta name = "" content="">

  3. 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= "" 颜色

  • 特殊字符

    • &lt 小于号 

    • &nbsp 空格

    • &gt 大于号

    • &copy 版权

    • &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.清单列表

  1. 有序列表 <ol> <li></li> </ol>

    属性:

    • type= “ ” 表示列表前面的序号

    • stat = “ ” 开始的序号

  2. 无序列表 <ul> <li></li> </ul>

    属性:

    • type = “” 表示列表前面的图标

      a. disc 圆点

      b. square 方形

      c. circle 空心圆点

  3. 定义列表<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 代码方式:

  1. 在点击事件中写: onclick = "javascript 代码"

  2. <script type = "text/javascript"> javascript 代码 </script>

  3. 引入外部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为假


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值