html5学习笔记(2)

最新推荐文章于 2025-04-22 10:07:38 发布
原创 最新推荐文章于 2025-04-22 10:07:38 发布 · 532 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

html5


列表：

http://www.w3school.com.cn/tags/html_ref_byfunc.asp


wKiom1WH49zRYI-5AAFKRucI-sE867.jpg

列表：

  • 无序列表：

    • 使用标签<ul><li>

    • 属性：disc, circle, square

  • 有序列表：

    • 使用标签<ol><li>

    • 属性：A,a,I,i,start

  • 嵌套列表：

    • 使用标签：<ul>,<ol>,<li>

  • 自定义列表：

    • 使用标签：<dl>,<dt>,<dd>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
< body >
     < ul  type = "circle" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ul >
     < ul  type = "square" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ul >
     < ol  type = "a" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ol >
     < ol  type = "A" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ol >
     < ol  type = "i" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ol >
     < ol  type = "I" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ol >
     < ol  start = "10" >
         < li >apple</ li >
         < li >bnana</ li >
         < li >orange</ li >
     </ ol >
     < ul  type = "square" >
         < li >fruit</ li >
             < ol >
                 < li >apple</ li >
                 < li >bnana</ li >
                 < li >orange</ li >
             </ ol >
         < li >vegetable</ li >
             < ol >
                 < li >potato</ li >
                 < li >tomato</ li >
                 < li >cabbage</ li >
             </ ol >
     </ ul >
     < dl >
         < dt >helloworld</ dt >
             < dd >print helloworld</ dd >
         < dt >helloworld</ dt >
             < dd >print helloworld</ dd >
     </ dl >
</ body >


html块

  1. html块元素

    1. 块元素在显示时，通常以新行开始

    2. <h1>,<p>.<ul>

  2. html内联元素：

    1. 内联元素通常不会以新行开始

    2. <b>,<a>,<img>

  3. html <div>元素：

    1. <div>元素也被称为块元素，其主要是组合html元素的容器

  4. html<span>元素：

    1. <span>元素是内联元素，可作为文本的容器

<div>和<span>通常一起使用


index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < link  rel = "stylesheet"  type = "text/css"  href = "divcss.css" >
     < style  type = "text/css" >
         span{
             color: crimson;
         }
     </ style >
     < title ></ title >
</ head >
< body >
     < p >hello world</ p >
     < h1 >hello world</ h1 >
     < br />
     < b >helloworld</ b >
     < a  href = "hrefht.html" >hrefht</ a >
     < br />
     < div  id = "divid" >
         < p >helloworld</ p >
         < a >click</ a >
     </ div >
     < div  id = "divspan" >
         < p >< span >hello world</ span >this is a text</ p >
     </ div >
</ body >
</ html >


divcss.css:

1
2
3
#divid p{
     color : chartreuse;
}

wKioL1WISMaiRHY5AABrROF4FYs078.jpg

html布局：

    

使用<div>布局   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < style  type = "text/css" >
         body{
             margin: 0px;
         }
         div#container{
             width: 100%;
             height: 950px;
             color : gainsboro;
         }
         div#heading{
             width: 100%;
             height: 10%;
             background-color: cornflowerblue;
         }
         div#content_menu{
             width: 30%;
             height: 80%;
             background-color: gainsboro;
             float: left;
         }
         div#content_body{
             width: 70%;
             height: 80%;
             background-color: burlywood;
             float: right;
         }
         div#footing{
             width: 100%;
             height: 10%;
             background-color: black;
             clear: both;
         }
     </ style >
     < title ></ title >
</ head >
< body >
     < div  id = "container" >
         < div  id = "heading" >头部</ div >
         < div  id = "content_menu" >内容菜单</ div >
         < div  id = "content_body" >内容主体</ div >
         < div  id = "footing" >底部</ div >
     </ div >
</ body >
</ html >

    

使用<table>布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body  marginheight = "0px"  marginwidth = "0px" >
     < table  width = "100%"  height = "950px"  style = "background-color: aliceblue" >
         < tr >
             < td  colspan = "2"  width = "100%"  height = "10%"  style = "background-color: cornflowerblue" >头部</ td >
         </ tr >
         < tr >
             < td  width = "20%"  height = "80"  style = "background-color: darkgray" >
                 < ul >
                     < li >ios</ li >
                     < li >ios</ li >
                     < li >ios</ li >
                 </ ul >
             </ td >
             < td  width = "60%"  height = "80%"  style = "background-color: azure" >实体</ td >
             < td  width = "20%"  height = "80"  style = "background-color: darkgray" >左菜单</ td >
         </ tr >
         < tr >
             < td  colspan = "2"  width = "100%"  height = "10%"  style = "background-color: blue" >底部</ td >
         </ tr >
     </ table >
</ body >
</ html >



极客学院：http://www.jikexueyuan.com/course/135.html

HTML5个人学习笔记
05-27
主要包含各个标签（段落、换行、图像），链接，注释，表格，列表，视频，音频等 适用于初学者，有什么不懂的可以私聊
html 5 学习教程笔记.zip
01-01
html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 ...
HTML5学习笔记
m0_61721166的博客
03-08 9272
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
黑马程序员 HTML5 学习笔记
susu的博客
07-14 2578
1.html语法规范2.html基本结构标签3.开发工具4.html常用标签5.html中注释和特殊字符
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 3176
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML 基础标签学习笔记
Rey_family的博客
04-13 2273
示例网站重要保存邮箱：我的网页这是我的第一个网页姓名</th><th>年龄
html5——前端笔记
qq_48721706的博客
09-02 3332
html笔记
h5学习笔记
weixin_51109349的博客
01-10 4797
h5什么是h5h5的好处h5新特性H5新增语义化标签什么是h5 万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言（HTML） 的第五次重大修改，作为新HTML语言，具有新的元素，属性和行为 它有更多样化和强大的网站和应用程序 h5的好处 提高可用性和改进用户的友好体验; 有几个新的标签，这将有助开发人员定义重要的内容； 可以给站点带来更多的多媒体元素(视频和音频)； 可以很好的替代FLASH； 当涉及到网站的抓取和索引的时候，对于SEO很友好； 将被大量应用于移动应用程序和游戏。 h5新特性
HTML学习笔记——05：表格
qq_31532983的博客
01-15 9700
HTML-表格
HTML学习笔记
最新发布
2301_80155689的博客
04-22 2万+
dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl >< dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl ></< dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl >< dl > < dt > 术语 </ dt > < dd > 定义内容 </ dd > </ dl ></
html5+css3学习笔记（持续更新
flyffffly的博客
03-17 1361
其实我早在之前就学过，只不过当时并没有记录下来，也没有理解其底层原理，所以现在再次学习一遍，本文将记录我二次学习的过程。
HTML5 学习笔记总结（借鉴黑马程序员pink老师前端入门）
haobowen的博客
11-07 5855
1.网页 1.1 什么是网页 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合 网页是网站中的一“页”，通常是HTML 格式的文件，它要通过浏览器来阅读 网页是构成网站的基本元素，它通常由图片，链接，声音，文字，视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为 HTML 文件 1.2 什么是 HTML HTML 指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言.
精选资源
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
精选资源
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
html5学习笔记（13）
thystar的专栏
08-13 1131
本地数据库： html5中，内置类两种数据库，一种为SQLLite, 一种为indexedDB 数据库操作模板： <!-- 1，创建访问数据库的对象： 2. 使用事务处理 --> // 创建数据库, openDatabase(数据库名， 版本号，数据库描述, 数据库大小) var db = openDatabase("mydb
thml5 学习笔记（10）
thystar的专栏
08-12 635
canvas绘制渐变图形： function draw(id){ var canvas = document.getElementById(id); if(canvas == null){ return false; }
html学习笔记（12）
thystar的专栏
08-13 528
web storage：在web上储存数据： 这里的储存是针对客户端本地而言的，分为两种： 1.sessionStorage ： 将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站花费的时间，session对象可以用来保存在这段时间内所要求保存的任何数据。 2. localStorage： 将数据保存在客户
html5学习笔记(5)
thystar的专栏
12-03 523
html5表单的新增元素和属性 formaction: 1 2 3 4 5 6 7 8 9 10 11 12 body>     form id="testform">         input type="text">     form>     textarea form="testform">textarea>
HTML5与CSS3的Markdown学习笔记精要
资源摘要信息:"这份文档是关于HTML5和CSS3以及Markdown的学习笔记。它包含个人在学习这些技术时总结的关键知识点和技巧，目的是为了方便他人在开发网页时进行参考和利用。以下是文档中涉及的关键技术知识点详细说明...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值