3.文本标签 ">
锐单电子商城 , 一站式电子元器件采购平台!
  • 电话:400-990-0325

HTML系统学习

时间:2023-04-21 22:37:01 延边静压式液位变送器

目录

1.概念

2.快速入门

标签-toc" style="margin-left:0px;">3.文本标签

4.特殊字符表

5.图片标签

6.列表和链接标签

6. div和span标签:

7. 语义标签:

8. 表格标签:

9.案例:旅游网站首页


1.概念

## HTML

1. 概念:是最基本的网页开发语言

* Hyper Text Markup Language 超文本标记语言

* 超文本:

* 超文本是一种网状文本,通过超链接将不同空间的文本信息组织在一起.

* 标记语言:

* 语言由标签组成。<标签名称> 如 html,xml

* 标记语言不是编程语言

2.快速入门

2. 快速入门:

* 语法:

1. html文档后缀名 .html 或者 .htm

2. 标签分为

1. 封标签:有开始标签和结束标签。

2. 自闭症和标签:开始标签和结束标签在一起。

3. 可嵌套标签:

需要正确的嵌套,你不能有我,我有你

错误:

正确:

4. 属性可以在开始标签中定义。属性由键对组成,值需要引号(单双都可以)

5. html标签不区分大小写,但建议使用小写。

* 代码:

title

Hello World

Hello World

       

           

3.文本标签

 HTML 标签列表(字母排序) | 菜鸟教程   这个教程很好哦。下面的内容只能说是简单提一提。

    3. 标签学习:

        1. 文件标签:构成html最基本的标签

            * html:html文档的根标签

            * head:头标签。用于指定html文档的一些属性。引入外部的资源

            * title:标题标签。

            * body:体标签

            * :html5中定义该文档是html文档

        2. 文本标签:和文本有关的标签

            * 注释:

            *

to

:标题标签

                * h1~h6:字体大小逐渐递减

            *

:段落标签

            *
:换行标签

            *


:展示一条水平线

                * 属性:

                    * color:颜色

                    * width:宽度

                    * size:高度

                    * align:对其方式

                        * center:居中

                        * left:左对齐

                        * right:右对齐

            * :字体加粗

            * :字体斜体

            * :字体标签

            *

:文本居中

                * 属性:

                    * color:颜色

                    * size:大小

                    * face:字体

            * 属性定义:

                * color:

                    1. 英文单词:red,green,blue

                    2. rgb(值1,值2,值3):值的范围:0~255  如  rgb(0,0,255)

                    3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF

                * width:

                    1. 数值:width='20' ,数值的单位,默认是 px(像素)

                    2. 数值%:占比相对于父元素的比例

案例:




    
    Title


    HelloWorld 
白日依山尽,
黄河入海流。

唐诗

唐诗

唐诗

唐诗

唐诗
唐诗

1.阿啦啦啦拉拉阿拉拉阿拉啦啦啦啦啦啦啦

2.阿啦啦啦拉拉阿拉拉阿拉啦啦啦啦啦啦啦

3.阿啦啦啦拉拉阿拉拉阿拉啦啦啦啦啦啦啦



格机格机格机格机格机格机
格机格机格机格机格机格机
格机格 机格机格机格机格机

PS:正常文字要换行一定要有br,你在idea敲回车,他utf8会识别为一个空格

4.特殊字符表 

 HTML 符号实体参考手册 | 菜鸟教程

html大小写不敏感,但是里面实体字符是敏感的。

5.图片标签

标签 | 菜鸟教程">HTML 标签 | 菜鸟教程

3. 图片标签:

            * img:展示图片

                * 属性:

                    * src:指定图片的位置

            * 代码:

                 

                古镇

           

               

           

               

           

               

这里遇到一个问题,注意一下

HTML中的img标签中的src属性的路径问题:图片无法显示的原因及解决办法_作业布多的博客-CSDN博客_img src绝对路径不显示

6.列表和链接标签

4. 列表标签:

            * 有序列表:

                * ol:

                * li:

            * 无序列表:(具体的自己上菜鸟查)

                * ul:

                * li:

5. 链接标签:

            * a:定义一个超链接

                * 属性:

                    * href:指定访问资源的URL(统一资源定位符)

                    * target:指定打开资源的方式

                        * _self:默认值,在当前页面打开

                        * _blank:在空白页面打开

列表标签:

  1. 第一个
  2. 第二个
  3. 第三个

链接标签:(中间的文字也可以改成图片img,用


点我

点我
点我

href 还可以访问当前页面、启动邮件,即:

 

 6. div和span标签:

            * div:每一个div占满一整行。块级标签

            * span:文本信息在一行展示,行内标签 内联标签(结合CSS一起使用)

 

7. 语义化标签:

html5中为了提高程序的可读性,提供了一些标签。默认下不改变样式,要结合css来操作。

            1.

:页眉

            2.

:页脚

 

8. 表格标签:

            * table:定义表格

                * width:宽度

                * border:边框

                * cellpadding:定义内容和单元格的距离

                * cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、

                * bgcolor:背景色

                * align:对齐方式

            * tr:定义行

                * bgcolor:背景色

                * align:对齐方式

            * td:定义单元格

                * colspan:合并列,这两个要注意一下

                * rowspan:合并行

            * th:定义表头单元格

            * :表格标题

            * :表示表格的头部分

            * :表示表格的体部分

            * :表示表格的脚部分

 没有列的概念,只有行哦

 

9.案例:旅游网站首页

    1. 确定使用table来完成布局  

    2. 如果某一行只有一个单元格,则使用

    3. 如果某一行有多个单元格,则使用

       

           

               

           

       

好处是不需要考虑是否需要合并,因为这里外层的table只有这一行一格,里面的格子在内层的table写

 




    
    小陈旅游网


    
    
    
首页 门票 酒店 香港车票 出境游 国内游 港澳游 抱团定制 全球自由行 收藏排行榜
小陈精选

上海飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游+四星级酒店+接送机)

¥999

上海飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游+四星级酒店+接送机)

¥999

上海飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游+四星级酒店+接送机)

¥999

上海飞三亚五天四晚自由行(春节销售+亲子/蜜月/休闲游+四星级酒店+接送机)

¥999
国内游

延边深度旅游,体验南韩北韩料理,感受边境民族风俗,值得一去!

¥999

青岛精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥699

青岛精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥699

青岛精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥699

青岛精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥699

青岛精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥699

青岛精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥699
境外游

境外旅游低价促销,机票通通报销,还在等什么,快去体验国外风景人文吧!

¥6666

越南精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥6666

越南精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥6666

越南精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥6666

越南精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥6666

越南精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥6666

越南精品旅游(五星级酒店+海鲜畅吃+海上冲浪+海洋公园参观)

¥6666
这里是最后一行哦 没有版权Copyright哦

学习课程为b站黑马程序员的javaweb课程

锐单商城拥有海量元器件数据手册IC替代型号,打造电子元器件IC百科大全!

相关文章