HTML5学习笔记（总结提炼版）——001常见的HTML标签

最新推荐文章于 2024-05-24 10:28:21 发布
最新推荐文章于 2024-05-24 10:28:21 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunnyboy9/article/details/50881567
版权

前言：最近在学HTML5，想想还是把笔记放到博客来，一来可以相互分享和交流学习，二来可以督促自己不要放松！

下面贴上代码：源代码已经打包上传到我的资源里面，可以下载运行。
源码下载链接： 点击打开链接

w3cSchool

关于标签：




1.案例一：网站信息页面的显示：
1.1需求：
在网页中显示网站的信息的页面：效果如下：
1.2   分析: 1.2.1 技术分析：
【HTML的概述】
  • 什么是HTML
HTML:Hyper Text Markup Language  --- 超文本标记语言.
* 标记语言：指的是通过一组标签的形式描述事物的一门语言.
* 超文本：比普通的文本更强大.
  • HTML的作用
HTML是用来制作页面(静态页面).
HTML 在那些地方使用
在设计网站的页面的时候都要使用到HTML.
【HTML的使用】
  • HTML的文件的创建
一个HTML文件,扩展名是.html或者.htm结尾
HTML的结构标签
* 根标签:<html></html>
    *<head>  -- html的头标签
    *<body>  -- html的体标签
【HTML的字体标签】
  • <font>标签:HTML中的字体标签.
使用：<font>文字</font>
* <font>标签的属性:
    * <标签 属性名=”属性值” 属性名=”属性值”></标签>
    * 属性:
        *color属性:字体颜色
            *英文单词设置:black,red,green,blue...
            *使用16进制数设置:#FFFFFF , #FFF
        *size属性:字体的大小
        *face属性:字体
* 基本使用：
        
[HTML]  纯文本查看  复制代码
?
1
2
3
4
< font >我是HTML!</ font > < br />[/align]        < font color = "red" >我是HTML！</ font >< br />
         < font color = "#FF0000" size = "1" >我是小红！</ font >< br />
         < font color = "#00FF00" size = "7" >我是小绿！</ font >< br />
         < font color = "#0000FF" size = "100" >我是小蓝！</ font >< br />
【HTML的排版标签】
  • 标题标签：h标签<h1>...<h6>
        
[HTML]  纯文本查看  复制代码
?
1
2
3
<!-- HTML的标题标签 --> [/align]        < h1 >一级标题</ h1 >
         < h2 >二级标题</ h2 >
         < h3 >三级标题</ h3 >
  • 段落标签：p标签
        
[HTML]  纯文本查看  复制代码
?
1
2
3
4
5
< p >[/align]            一段内容内容
         </ p >
         < p >
             又一段内容内容
         </ p >
  • 字体加粗标签：b标签
[HTML]  纯文本查看  复制代码
?
1
< b >黑马训练营</ b >
  • 字体斜体标签：i标签
[HTML]  纯文本查看  复制代码
?
1
< i >黑马训练营</ i >
  • 字体下划线：u标签
[HTML]  纯文本查看  复制代码
?
1
< u >黑马训练营</ u >
  • 居中标签：<center>标签
[HTML]  纯文本查看  复制代码
?
1
< center >内容</ center >
1.2.2 步骤分析:
【步骤一】创建一个HTML的文档
【步骤二】设置标题
【步骤三】设置四个段落
【步骤四】使用字体标签将第一个段落中的某个部分的内容变为红色.
1.3   代码实现:
[HTML]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
< html >
     < head >
         < meta charset = "UTF-8" >
         < title >网站信息页面</ title >
     </ head >
     < body >
         < h1 >公司简介</ h1 >
         < hr />
         < p >
             < font color = "red" >“中关村黑马程序员训练营”</ font >是由< b >传智播客</ b >联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
         </ p >
         < p >
             黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
         </ p >
         < p >
             中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
         </ p >
         < p >
             一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
         </ p >
     </ body >
</ html >
1.4   总结:
HTML有标准:
* HTML4
   
[HTML]  纯文本查看  复制代码
?
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
* HTML5:支持视频播放,支持CSS3,支持定位,扩展标签...
    
[HTML]  纯文本查看  复制代码
?
1
<!DOCTYPE html>
<pre>标签：原生标签.
<hr/>标签：横线.

案例二：网站图片页面显示： 2.1   需求：
在一个页面中往往图文并茂.想在HTML中引入一个图片如何处理?
效果如下:
2.2   分析: 2.2.1 技术分析:
【HTML的图片标签】
图片标签:<img>
    * 属性:
         * src   :图片的来源.
         * width :图片的宽度.
         * height:图片的高度.
         * alt   :图片找不到显示的内容.
图片的引入的路径问题:
    * 路径：相对路径.
        * 如果引入的图片和html文件在同一级路径。
             * 直接写文件名或者./文件名
              
[HTML]  纯文本查看  复制代码
?
1
< img src = "cs10006.jpg" />[/align]              < img src = "./cs10006.jpg" />
        * 如果引入的图片在html文件的上一级路径。
            
[HTML]  纯文本查看  复制代码
?
1
< img src = "../cs10006.jpg" />
        * 如果引入的图片在html文件的下一级路径。
            
[HTML]  纯文本查看  复制代码
?
1
< img src = "img/cs10006.jpg" />
2.2.2 步骤分析:
【步骤一】创建一个html的文档
【步骤二】引入两张图片显示到页面
2.3   代码实现：
    
[HTML]  纯文本查看  复制代码
?
1
< img src = "logo2.png" height = "50" width = "200" />[/align]    < img src = "header.png" height = "50" width = "250" />

案例三：网站列表页面的显示 3.1   需求：
在网站的友情链接页面显示网站的所有的友情链接.
3.2   分析： 3.2.1 技术分析：
【HTML的列表标签】
  • 有序列表
[HTML]  纯文本查看  复制代码
?
1
2
3
< ol >
     < li ></ li >
</ ol >
  • 无序列表
[HTML]  纯文本查看  复制代码
?
1
2
3
< ul >
     < li ></ li >
</ ul >
【HTML的超链接标签】
HTML的超链接标签：<a>
    * 属性:
        *href   :链接的路径
        *target :打开的方式
            *_self   :在自身页面打开
            * _blank  :新打开一个窗口
3.2.2 步骤分析：
【步骤一】创建一个html的文档
【步骤二】创建一个无序列表
【步骤三】在无序列表中添加超链接标签.
3.3   代码实现：
        
[HTML]  纯文本查看  复制代码
?
1
2
3
4
5
< ul >[/align]            < li >< a href = "../案例一：网站信息页面的显示/案例一：网站信息页面的显示.html" >传智播客</ a ></ li >
             < li >< a href = "http://www.baidu.com" target = "_self" >百度</ a ></ li >
             < li >< a href = "http://www.163.com" target = "_blank" >网易</ a ></ li >
             < li >百合</ li >
         </ ul >
1.3.4   总结：
  • 无序列表的属性:
    * type属性
        *disc   ：实心点.
        *circle ：空心圆
        *square ：方块.
  • 有序列表的属性:
    * type属性:
        * 1      ：数字类型
        * a      ：英文类型
        * i      ：罗马字符
    * start属性:从哪开始
超链接的target属性:
    * _self
    * _blank
    * _parent

案例四：网站的首页的显示：
4.1   需求：
网站的首页的设计：
4.2   分析： 4.2.1 技术分析：
【HTML的表格标签】
[HTML]  纯文本查看  复制代码
?
1
2
3
4
5
6
< table >
< tr >
     < td ></ td >
     < td ></ td >
</ tr >
</ table >
属性:
    width    :表格宽度
    height   :表格高度
    border   :边框
    align    :表格水平位置:
        *left
        *center
        *right
<td>的属性:
    *colspan=”列数”
    *rowspan=”行数”
4.2.2 步骤分析：
【步骤一】创建一个html的页面
【步骤二】创建一个8行1列的表格
【步骤三】为每行内容填充数据.
案例五：网站的注册页面的显示： 5.1   需求：
使用HTML完成注册页面的设计：
5.2   分析： 5.2.1 技术分析
【HTML的表单标签（*****）】
HTML的表单标签：<form>
     * 常用属性:
          *action属性:提交的路径.默认提交到当前页面
          *method属性:请求的方式.GET和POST.默认是GET.
              ***** GET方式和POST方式的区别?
                   * GET   :数据会显示到地址栏中.GET方式提交是有大小的限制.
                   * POST  :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
HTML中表单元素：
* <input type=”text”>       :文本框.
    * 常用属性:
        * name   :表单元素的名称.必须有name属性，然后后台才可以接收数据.
        *value  :文本框的默认值.
        *size   :文本框的长度.
        *maxlength:文本框输入的最大长度.
        *readonly:只读文本框.
* <input type=”password”>   :密码框.
    * 常用属性:
        *name   :表单元素的名称.必须有name属性，然后后台才可以接收数据.
        *value  :密码框的默认值.
        *size   :密码框的长度.
        *maxlength:密码框输入的最大长度.
* <input type=”radio”>      :单选按钮.
    * 常用的属性:
        *name   :表单元素的名称.必须有name属性，然后后台才可以接收数据.
        *value  :单选按钮的默认值.
        *checked:单选按钮默认被选中.
* <input type=”checkbox”>   :复选按钮.
* 常用的属性:
        *name   :表单元素的名称.必须有name属性，然后后台才可以接收数据.
        *value  :单选按钮的默认值.
        *checked:单选按钮默认被选中.
* <input type=”button”>     :普通按钮.没有任何功能的按钮.
* <input type=”submit”>     :提交按钮.
* <input type=”reset”>      :重置按钮.
* <input type=”file”>       :文件上传的表单项.
* <input type=”hidden”>     :隐藏字段.
* <input type=”image”>      :图片按钮
* <select>                  :下拉列表.
* <textarea>                :文本域.
5.2.2 步骤分析：
【步骤一】创建一个html的文档
【步骤二】使用表格布局页面
【步骤三】在页面中使用表单标签完成注册页面
5.3   代码实现
[HTML]  纯文本查看  复制代码
?
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
< html >
     < head >
         < meta charset = "UTF-8" >
         < title ></ title >
     </ head >
     < body >
         < table border = "1" width = "90%" align = "center" >
             < tr >
                 < td >
                 <!--Logo部分-->
                     < table width = "100%" border = "1" >
                         < tr >
                             < td >
                                 < img src = "img/logo2.png" />
                             </ td >
                             < td >
                                 < img src = "img/header.png" />
                             </ td >
                             < td >
                                 < a href = "#" >登录</ a >
                                 < a href = "#" >注册</ a >
                                 < a href = "#" >购物车</ a >
                             </ td >
                         </ tr >
                     </ table >  
                 </ td >
             </ tr >
             < tr >
                 < td >
                     < table width = "100%" border = "1" bgcolor = "black" height = "100%" >
                         < tr >
                             < td >
                                 < a href = "" >首页</ a > 
                                 < a href = "" >手机数码</ a >  
                                 < a href = "" >电脑办公</ a >  
                                 < a href = "" >烟酒糖茶</ a >  
                                 < a href = "" >鞋靴箱包</ a >  
                             </ td >
                         </ tr >
                     </ table >
                 </ td >
             </ tr >
             < tr height = "400" background = "img/regist_bg.jpg" >
                 < td >
                 < form action = "../案例四：网站的首页的显示/案例四：网站首页.html" method = "post" >
                     < table border = "5" width = "60%" align = "center" bgcolor = "white" >
                         < tr >
                             < td >
                                 用户名
                             </ td >
                             < td >
                                 < input type = "text" name = "username" value = "" size = "20" maxlength = "6" >
                             </ td >
                         </ tr >
                         < tr >
                             < td >
                                 密码
                             </ td >
                             < td >
                                 < input type = "password" name = "password" />
                             </ td >
                         </ tr >
                         < tr >
                             < td >
                                 确认密码
                             </ td >
                             < td >
                                 < input type = "password" name = "repassword" />
                             </ td >
                         </ tr >
                         < tr >
                             < td >
                                 邮箱
                             </ td >
                             < td >
                                 < input type = "text" name = "email" />
                             </ td >
                         </ tr >
                         < tr >
                             < td >
                                 姓名
                             </ td >
                             < td >
                                 < input type = "text" name = "name" />
                             </ td >
                         </ tr >
                         < tr >
                             < td >
                                 性别
                             </ td >
                             < td >
                                 < input type = "radio" name = "sex" value = "男" checked>男< input type = "radio" name = "sex" value = "女" >女
                             </ td >
                         </ tr >
                         < tr >
                             < td >
                                 爱好
                             </ td >
                             < td >
                                 < input type = "checkbox" name = "hobby" value = "篮球" checked>篮球
                                 < input type = "checkbox" name = "hobby" value = "足球" >足球
                                 < input type = "checkbox" name = "hobby" value = "排球" >排球
                                 < input type = "checkbox" name = "hobby" value = "羽毛球" >羽毛球
                             </ td >
                         </ tr >
                         < tr >
                             < td >
                                 籍贯
                             </ td >
                             < td >
                                 < select name = "province" >
                                     < option >--请选择--</ option >
                                     < option value = "北京" selected>北京</ option >
                                     < option value = "上海" >上海</ option >
                                     < option value = "广州" >广州</ option >
                                 </ select >
                             </ td >
                         </ tr >
                         < tr >
                             < td >
                                 头像
                             </ td >
                             < td >
                                 < input type = "file" name = "upload" >
                             </ td >
                         </ tr >
                         < tr >
                             < td >
                                 简介
                             </ td >
                             < td >
                                 < textarea cols = "20" rows = "4" name = "info" >我是：</ textarea >
                             </ td >
                         </ tr >
                         < tr >
                             < td >
                                 生日
                             </ td >
                             < td >
                                 < input type = "text" name = "birthday" />
                             </ td >
                         </ tr >
                         < tr >
                             < td colspan = "2" >
                                  < input type = "submit" value = "注册" />< input type = "reset" value = "重置" />< input type = "button" value = "我是按钮" >
                             </ td >
                         </ tr >
                     </ table >
                     </ form >
                 </ td >
             </ tr >
             < tr >
                 < td height = "70" >
                     < img src = "img/footer.jpg" width = "100%" height = "100%" >
                 </ td >
             </ tr >
             < tr >
                 < td align = "center" >
                     < a href = "../案例一：网站信息页面的显示/案例一：网站信息页面的显示.html" >关于我们</ a > 联系我们 招贤纳士 法律声明 < a href = "../案例三：网站列表页面的显示/案例三：网站列表页面的显示.html" >友情链接</ a > 支付方式 配送方式 服务声明 广告声明 < br />
            
                     Copyright © 2005-2016 传智商城 版权所有
                 </ td >
             </ tr >
         </ table >
     </ body >
</ html >
5.4   总结： 5.4.1 HTML5扩展的表单标签.(*****h5不是所有浏览器都支持)
[HTML]  纯文本查看  复制代码
?
1
2
3
4
< input type=”email”>
< input type=”date”>
< input type=”number”>
< input type=”color”>

案例六：网站的后台页面的显示： 6.1   需求：
一个网站需要有后台页面,后台页面设计：
6.2   分析： 6.2.1 技术分析：
【HTML的框架标签】
框架标签:<frameset>,标签与body标签是冲突,有frameset就可以没有body.
* 属性:
    * rows
    * cols
使用<frame>标签，frame代表切分的每个部分.
6.2.2 步骤分析:
【步骤一】创建一个html的页面
【步骤二】将整个页面分成上下两个部分.
【步骤三】将页面的下半部分分成左右两个部分.
【步骤四】在左侧页面中添加一些链接.
【步骤五】点击左侧链接,将页面的内容显示到右侧.
6.3   代码实现：
    
[HTML]  纯文本查看  复制代码
?
1
2
3
4
5
6
< frameset rows = "15%,*" >[/align]        < frame  src = "top.html" name = "top" />
         < frameset cols = "15%,*" >
             < frame  src = "left.html" name = "left" />
             < frame  src = "right.html" name = "right" />
         </ frameset >
     </ frameset >
6.4   总结： 6.4.1 特殊字符的标签：
空格 :      
<   :<
>       :>

练习1：

<!--根标签-->

<html>
<!--头部标签-->
<!--
src和href的区别
src:引用,该资源是页面不可缺少的一部分,如(img标签 video标签 radio标签);
href:引入,引入外部资源,如(a标签 link标签)
-->
  <head>
     <meta charset="UTF-8">
     <title>第一个程序</title>
  </head>
<!--身体标签-->
  <body>
     你好,世界!
  </body>

</html>


练习2：

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--标题标签-->
    <h1>11111111111111111</h1>
    <h2>11111111111111111</h2>
    <h3>11111111111111111</h3>
    <h4>11111111111111111</h4>
    <h5>11111111111111111</h5>
    <h6>11111111111111111</h6>


    <div>2222222222222222</div>
    <div>222222222222222</div>
    <div>1111111111111111111111</div>
    <div>1111111111111111111111</div>
<!--段落标签-->
    <p>eeeeeeeeeedffkjhefhjgerhjkjher</p>
    <p>eeeeeeeeeedffkjhefhjgerhjkjher</p>
    <p>eeeeeeeeeedffkjhefhjgerhjkjher</p>
<!--输入框标签-->
    <input><br>
    <input placeholder="请输入用户名"><br><br><br>
    <input value="张三"><br>
    <input type="color"><br>
    <input type="checkbox"><br>
    <input type="date"><br>
    <input type="range"><br>
<!--换行标签-->
    <br>
<!--超链接标签-->
    <a href="http://baidu.com" target="_blank">百度一下,你就不知道</a>
<!--图像标签
    相对路径 项目中的资源
    绝对路径 http:// https:// ftp:// file://
   -->
    <img src="https://www.baidu.com/img/bd_logo1.png" width="100" height="150">
    <img src="img/7.jpg" width="100" height="150">


  <!--列表标签-->
   <ul>
       <li>111111</li>
       <li>222222</li>
       <li>333333</li>
       <li>444444</li>
   </ul>
  <!--容器标签-->
   <div>1111111111111111111111</div>


</body>
</html>

练习3：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>富士康PK万达：同时转型电商背后差别在哪？</title>
</head>
<body>
  <!--文章-->
   <article>
       <!--头部-->
      <header>
          <h1>富士康PK万达：同时转型电商背后差别在哪？</h1>
          <h4>一言楠尽08月28日 07:30 富士康万达富连网分类 :互联网阅读 :39075</h4>
      </header>
       <!--章节-->
      <section>
          <h3>1、核心战略PK</h3>
          <p>富连网是富士康旗下专业的3C数码电商平台，其最大的亮点是主营3C数码家电品类的产品，有点类似早期的京东，希望利用富士康的产业链优势，从B2C出发最后形成一个C2B的完整生态圈闭环；在服务与资源上看，富士康为富连网提供了相当多区别于传统电商的玩法，甚至独自完成了首届智能手表节的营销推广活动。</p>
          <p>对万达电商来说，其主体是“飞凡网”，由万达、百度、腾讯共同出资成立，核心是重新整合万达集团线下资源，实现线上线下业务和服务融合，要打造一个“全球性”O2O开放式电商平台”。此外，该平台不以城市做为分界依据，而是以万达广场为辐射核心，这也是在最大程度上利用万达商业地产的资源来进行扩张。</p>
      </section>
      <section>
          <h3>2、服务层级PK</h3>
          <p>事实上，中国互联网发展这十几年鲜有巨头直接合作成功的案例，大多是好聚不好散，尤其是对万达来说，如果把希望都寄托在百度与腾讯身上，也是颇为危险的——要知道“BT”这两个国内最大的互联网公司目前都希望抓住O2O的风口实现二次突破，万达何尝又不是他们眼中的“土大款”呢？初期弄明白O2O电商的玩法后，未来万达电商应该更注重自身品牌与渠道的建设。</p>
      </section>
       <!--尾部-->
      <footer>
          <h5>作者介绍：穆楠，《复制互联网之三》系列图书作者，百度百家、网易、搜狐、艾瑞等多家网站专栏作家，科技专栏「一言楠尽」创办人。</h5>
      </footer>
   </article>
</body>
</html>

练习4：HTML5常用标签

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <progress value="20" max="100"></progress>
   <audio src="source/music.m4a" controls="controls"></audio>
   <video src="source/BigBuck.m4v" controls="controls"></video>
</body>
</html>
Walden_tinghou
关注
专栏目录
【ChatGPT】实用 Prompt 指令大全 —— 一文教你如何更好地挖掘 GPT 的价值
程序员光剑
04-15 2万+
ChatGPT 是由 OpenAI 开发的一种先进的大型语言生成模型，能够理解和生成准确、自然且连贯的文本。文本生成数据分析内容审核语义理解自然语言推理以及其他众多任务ChatGPT是一种基于GPT-3.5架构的大型语言模型，由OpenAI公司开发。该模型在自然语言处理领域有着广泛的应用，可以用于文本生成、文本分类、情感分析、问答系统等任务。本文将从模型的架构、训练方式、优缺点等方面对ChatGPT进行详细介绍。一、模型架构。
从信息到知识到智能——理解和改变世界：目的论：Why
程序员光剑
09-24 1736
由于信息爆炸的到来，使得我们很容易丢失重要的信息。因此，知识就是对信息的整理归纳提炼，而智能则是指人工智能和机器学习等技术的应用。当把目光投向不同层面的智慧时，就会发现无处不在的监控系统、社交网络、搜索引擎、推荐系统、图像识别系统……但是，如何将这些复杂的系统串联起来成为一个更好的整体？如何让它们能够协同工作，共同完成一项任务？如何实现更高效、低成本地处理大量数据？
HTML5学习笔记（总结提炼版）——001
03-14
HTML5学习笔记（总结提炼版）——001
HTML5标签学习笔记
weixin_33895695的博客
02-28 73
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Html5Test</title> <style> s...
html5笔记（标签）
weixin_34391854的博客
03-29 80
1、aside aside字面理解为“旁边”，在html5中范围更广一点，是跟主内容相关，但是又可以独立的内容 ，可以是广告、引用、侧边栏等等。html5站的例子就是新闻的内容页或者列表页，以列表页为例，主要内容为新闻的分页列表，右侧的则为aside，显示为新闻列表相关的最新新 2、figure <figure> 标签用于对元素进行组合。 3、q 请使用q 元素来标记短的引...
html5标签学习笔记
qq_22809495的博客
03-02 1222
这是我的学习html5的基础标签语法的学习
HTML5笔记 基本标签
zzz_try的博客
11-05 76
HTML5学习笔记01——HTML标签
visionchyw的博客
05-09 380
HTML语法规范 标签的构成 双标签：<strong></strong> 单标签：<br> 标签的属性 标签的属性写在开始标签内部 标签上可以同时存在多个属性 属性之间通过空格隔开 标签名与属性之间必须通过空格隔开 属性之间没有顺序之分 标签关系 父子关系：嵌套关系 兄弟关系：并列关系 HTML标签学习 排版系列标签 标题标签 一级标题：<h1> 二级标题：<h2> 三级标题：<h3> 四级标题：<h4> 五级
HTML5标签篇 （一）
限定小码农的博客
03-03 1586
HTML5 一、结构元素 1.header：表示页面中一个内容区块或整个页面的标题 <header class="qui-header"> <h1>国内旅游计划</h1> </header> 2.nav：表示页面中导航链接的部分 3.aside：表示article标签元素内容之外的、与article标签内容相关的辅助信息。可用作...
HTML5学习笔记（总结提炼版）——002 CSS
03-14
【CSS简介】 CSS，全称为层叠样式表（Cascading Style Sheets），是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的Web标准。...持续学习和实践CSS，将使你能够创建出更具吸引力和功能性的网站。
HTML5详细笔记
11-23
详细的HTML5笔记，HTML5笔记，HTML5笔记，HTML5笔记。
信息资源管理——期末复习
最新发布
siri__iiiii的博客
05-24 998
信息资源管理——期末复习 参考：信息资源管理（第三版）主编 马费成 赖茂生 （该笔记重点整理一、二章内容，其他章节只罗列了一些常考知识点）
HTML5 标签大全笔记，用到的时候翻一下，百度都省了！
热门推荐
龙叔的博客
08-24 2万+
HTML标签大全，前端方向必备
HTML学习笔记
ninghongbo123的博客
05-09 177
style属性<html> <body> <h1 style="font-family:arial;color:red;font-size:20px;text-align:center">This is a heading</h1> <p>上面的标题相对于页面居中对齐。</p> </body> </html>计算机输出标签<html> <body> <code>Computer code</code
HTML5新增的标签笔记总结
qq_41358175的博客
06-23 80
HTML5的学习（一）HTML5标签
JollyLee
01-04 1126
1.HTML5的新特性： 2.HTML5标签
HTML5笔记
darabiuz的博客
08-01 396
HTML5详解笔记1.浏览器http理解1.浏览器和服务器2.浏览器访问网页原理3.浏览器请求数据过程4.什么是url5.补充2.HTML1.认识HTML2.HTML发展史3.html结构理解4.字符集问题6.字符实体5.DTD文档声明7.❗❗各大标签介绍1. `1.浏览器http理解 1.浏览器和服务器 1. 什么是浏览器 像qq一样是安装在电脑上的软件 2. 浏览器功能 将网页渲染出来给用户查看 让用户能够通过浏览器和网页交互 （点击，输入，拖动等操作和网页交互） 五款主流浏览器（IE,chro
html笔记（完整版）
秦哥的博客
08-09 2万+
目录 码仙励志 背景颜色 bgcolor 注释 空格  版权符© 网页标题 标题标记 网页编码 设置连接颜色link、alink、vlink 强制换行标记 换段落标记 居中对齐白标记 预格式化标记 列表项目标记 无序列表标记 有序列表标记 定义型列表 水平分割线标记 分区显示标记 字体设置标记 粗字体标记 斜字体标记 文字下标字体标记​ 文字上标字体...
【狂神说Java】HTML5完整教学笔记
qq_44005101的博客
05-18 1382
【狂神说Java】HTML5完整教学笔记01 HTML详解1.1 初识HTML1.2 网页基本标签1.3 图像、超链接标签及网络布局1.4 表单及表单应用1.5 表单初级验证 01 HTML详解 1.1 初识HTML Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等。 Html5+Css3 —>现在使用的版本 Html5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，
HTML5学习笔记：优势、语法与表单元素详解
HTML5的学习笔记涵盖了从基础语法到高级特性的全面内容，包括语义化、表单设计、多媒体处理和现代通信技术，这对于提升网页开发效率和兼容性具有重要意义。对于前端开发者而言，掌握HTML5不仅是技术更新的要求，也是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值