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:在空白页面打开
列表标签:
- 第一个
- 第二个
- 第三个
链接标签:(中间的文字也可以改成图片img,用
href 还可以访问当前页面、启动邮件,即: * div:每一个div占满一整行。块级标签 * span:文本信息在一行展示,行内标签 内联标签(结合CSS一起使用) html5中为了提高程序的可读性,提供了一些标签。默认下不改变样式,要结合css来操作。 1. 2. * table:定义表格 * width:宽度 * border:边框 * cellpadding:定义内容和单元格的距离 * cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、 * bgcolor:背景色 * align:对齐方式 * tr:定义行 * bgcolor:背景色 * align:对齐方式 * td:定义单元格 * colspan:合并列,这两个要注意一下 * rowspan:合并行 * th:定义表头单元格 *
点我
点我
点我 6. div和span标签:
7. 语义化标签:
8. 表格标签:
* :表示表格的头部分
*
*
:表示表格的脚部分没有列的概念,只有行哦
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课程
相关文章
动力学技术KTU1121 USB Type-C 端口保护器的介绍、特性、及应用
Sensata PTE7300密封数字压力传感器的介绍、特性、及应用
PANJIT PBHV8110DA/PBHV9110DA低Vce(sat)晶体管的介绍、特性、及应用
ams OSRAM OSLON 黑色平板X LED器件的介绍、特性、及应用
Cree LED CLQ6A三合一贴片LED的介绍、特性、及应用
Cree LED CLQ6B 4-in-1 RGBW贴片LED的介绍、特性、及应用
NDK NX1210AB表面贴装晶体的介绍、特性、及应用
伊顿ACE2V3225共模芯片电感器的介绍、特性、及应用
意法半导体X040灵敏型栅可控硅和Z040可控硅的介绍、特性、及应用
ABLIC S-82Y1B电池保护芯片的介绍、特性、及应用