侧边栏壁纸
博主头像
liuxy博主等级

细水长流,吃穿不愁

  • 累计撰写 39 篇文章
  • 累计创建 30 个标签
  • 累计收到 6 条评论

目 录CONTENT

文章目录

html5初步了解

liuxy
2022-11-20 / 0 评论 / 1 点赞 / 285 阅读 / 1,174 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-11-27,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1、html5新特性:

  • 绘画标签canvas;
  • 用于媒介回放的video和audio;
  • 对本地离线存储更好的支持;
  • 新的特殊内容元素: article 、 footer 、 header 、 nav 、 section ;
  • 新的表单元素: calender 、 date 、 time 、 email 、 url 、 search ;
    -浏览器的支持 Safari 、 Chrome 、 Firfox 、 Opera包括IE9基本支持HTML5.

2、html5开发环境搭建  IDEA。

  • IDEA的基本使用方法,首先new 一个Static Web -->>Static Web -->>next ;
  • 编辑项目Name and project Path -->>finish;
  • 新建相关html文件 -->>编辑相关内容–>>运行;
  • 选择相应浏览器运行当前html文件;

3、html5基础;

  • 声明: (头文件) html5 和 html4.xx 之间声明方式都有所不同;
  • html基础标签:
 <head>  <meta charset="utf-8">  -->>编码格式指定   </head> ; <body></body>; 
  • 标题:
<h1>标题</h1>  <h2>标题</h2>  <h2>标题</h2>  .... <h6></h6>;
  • 段落:
<p>段落:定义一段文字;</p>  
  • 超链接:
<a href="http://www.baidu.com">百度</a>
  • 图像:
<img src="图片地址"></img>

元素、属性、格式化:

  • 元素:从开始标签到结束标签的所有代码;

    语法:元素的内容是开始标签与结束标签之间的内容;空元素在开始标签中进行关闭;大多数元素可拥有属性;
    嵌套的HTML元素:大多数的html元素都是可以嵌套的;

<div> <p> </p> </div> ...

注:

(<br />-->> 换行, 空元素)
  • 属性:标签可以拥有属性为元素提供更多的信息;

属性以键/值的形式出现:
eg:href = “http://www.baidu.com
常见的标签属性:
align – 对齐方式
bgcolor-- 背景颜色  background – 背景图片
target – 规定在何处打开连接  _self:当前窗口打开   _back – 开辟一个新的窗口打开新的界面
通用属性:
class – 元素类名
id – 元素唯一ID
style – 元素样式
title – 元素的额外信息
格式化:

  • big 在html5 中被淘汰

4、html5的样式:

  • style – 样式定义
  • link – 资源引用
  • rel = “stylesheet” – 外部样式表
  • type = “text/css” – 引入文档的类型
  • margin-left – 边距
  • 三种样式插入方式:
    外部样式表:
<link rel = "stylesheet" typr = "text/css" hred = "mycss.css">

内部样式表:

<style type = "text/css"> body{.......}</style>

内联样式表:

<p style= "color : red"></p>

5、html5的连接:

  • 连接数据:
  • 文本连接:
 <a href = "http://baidu.com">百度</a>
  • 图片连接:
<a href = "http://baidu.com"> <img src = "images/1.jpg"></img></a>
  • 属性:

href属性:指向另外一个文档的连接;
name属性:创建文档内的连接;

<a name = "tips">hello</a>
<a href = "#tips">跳转到hello</a>

img标签属性:
alt – 替换文本属性
width – 宽
height – 高

<a href = "http://baidu.com"> <img src = "images/1.jpg" alt = “百度” width = “100px” height = “100px”></img></a>

6、html5中表格:table

  • 声明:
<table border = "1">  <!--  border  -- 边框  -->
<caption>表格</caption> <!--  表格的标题  -->
<tr>
<ht></ht>  <!--  表头  -->
<ht></ht>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
  • 单元格内的边距、单元格之间的间距:
<table vorder = "1" cellpadding = "10"></table>

cellpadding = “10”
 cellpacing = “10”  单元格之间的间距

7、html5的列表、块、布局

  • 列表:
<ul> <li></li></ul>   有序列表    属性: A   a  I    i    start
<ol><li></li></ol>    无需列表

嵌套列表

  • 块:
  • html块元素:块元素在显示时,通常会以新行开始     h1  p   ul
  • 内联元素:通常不会以新的行开始    b   a   img
  • div元素:也被称为块元素,其主要是组合html元素的容器
  • span元素:内联元素,可作为文本的容器
  • html的布局:
  • div布局:
  • table布局:
1
广告 广告

评论区