HTML

最新推荐文章于 2024-07-10 01:10:22 发布

小菜鸟的编程路

最新推荐文章于 2024-07-10 01:10:22 发布

阅读量269

点赞数

分类专栏： javaWeb阶段知识文章标签： html

本文链接：https://blog.csdn.net/qq_27007781/article/details/108522953

版权

javaWeb阶段知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Html简介

Html发展历程：（三个版本：h4,xhtml,h5）

Html简介

超文本标记语言HTML：关心的是标签的语义，至于样式交给css控制即可
（假如一些字用h1标签包着，那代表他是内容标题，至于样式，css随便设置，所以html不管样式，只管它这一块代表的含义是什么）

超文本：超出文本范畴

标记语言：由标签构成的语言。<标签名称>

操作思想：为了操作数据，都需要对不同的数据进行不同标签的封装（HTML），通过标签中的属性对封装的数据进行操作，标签就相当于一个容器，对容器中的数据进行操作，就是在不断改变容器的属性值（CSS）

Html发展历程：（三个版本：h4,xhtml,h5）

1999年html4.0 ——》2007年xhtml（本来w3c觉得html语法太松散，而xml扩展标记语言语法严格，所以想让程序员都用xml，但是怕一下子适应不了，所以出现了xhtml过度版本，但是还是没成功）——》2015 H5（WHATWG和W3C组织共同合作指定）

所以我们在编写Html网页的时候我们总要确定用的是哪个版本，这样才能更正确的使用标签，这是就出现了doctype去帮助浏览器解析这个网页采用的是哪个版本的html，不同的版本声明的是不同的doctype，放在html最上边，这就是文档声明，用于标识你用的是哪个版本的html，至于具体版本的文档声明想知道可以上网查一下，H5的文档声明是最简单的：<!DOCTYPE html>

Html文件说明

根标签html

根标签内部：分头部分和体部分

头部分：主要来放置页面的一些设置信息（标题title，html页面的编码方式meta标

签中的charset等）

meta标签是自结束标签：

<meta charset="utf-8"> 设置页面的字符编码

<meta name="keywords" content="关键词,关键词,关键词">

在搜索引擎中搜索什么样的关键词能够找到该页面

<meta name="description" content="页面的描述">

体部分：主要放置Html的页面内容，标签为body

图片的格式学习

图片的格式

         JPEG(JPG)

                   - JPEG图片支持的颜色比较多，图片可以压缩，但是不支持背景透明

                   - 一般使用JPEG来保存照片等颜色丰富的图片

         GIF

                   - GIF支持的颜色少，只支持简单的透明，支持动态图

                   - 图片颜色单一或者是动态图时可以使用gif

         PNG

                   - PNG支持的颜色多，并且支持复杂的透明（背景可以设置为透明）

                   - 可以用来显示颜色复杂的透明的图片

图片的使用原则：

                   效果不一致，使用效果好的

                   效果一致，使用占用大小中比较小的

标签语法

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

2. 标签分为

         1. 围堵标签：有开始标签和结束标签。如 <html> </html>

         2. 自闭和标签：开始标签和结束标签在一起。如 <img />、<br />、<hr />

3. 标签可以嵌套：

         需要正确嵌套，不能你中有我，我中有你

         错误：<a><b></a></b>

         正确：<a><b></b></a>

4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

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

普遍使用的标签

文件标签

构成html最基本的标签

html:html文档的根标签

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

title：标题标签。

body：体标签

<!DOCTYPE html>：html5中定义该文档是html文档

文本标签

和文本相关的标签

（这些标签用css也能展现出他们的效果，但是我们关心的是html的语义，而不是他们的表现形式）

注释：

<h1> to <h6>：标题标签

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

<p>：段落标签（有间隔）

<br>：换行标签

<hr>：展示一条水平线

         属性：

                   color：颜色

                   width：宽度（表示线的长度）

                   size：高度

                   align：对其方式

                            center：居中（默认）

                            left：左对齐

                            right：右对齐

<font>:字体标签

属性：

                   color：颜色

                   size：大小

                   face：字体

<center>:文本居中

em和i标签：斜体，i没有语义

strong和b标签:粗体，b没有语义

small：缩小字体，多用于合同细则，版权等地方

cite:表示参考的内容，书名，歌名，话剧名，电影名等

q：默认帮内容加引号

sup：幂次方标签：比如2的2次方 2<sup>2</sup>

sub：下标例如化学元素中的H2O H<sub>2</sub>O

del:内容会自动添加删除线

ins：内容自动添加下划线

pre:将内容原样表现标签

属性定义：

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. 数值%：占比相对于父元素的比例

列表标签

无序列表：ul里面加li，默认前面是实心原点，可以在ul中使用type属性改变，type属性有disc(实心圆点)，square(正方形方块)，circle(空心圆点)

如果想去掉前面的点，则使用css选中ul再设置list-style: none;去掉

有序列表：ol里面加li，至于前面的顺序样式，也是利用type属性控制

Type属性可以写1（默认值），a，A，I(大写罗马数字)，i(小写罗马数字)

如果想去掉前面的排序标记，则使用css选中ul再设置list-style: none;去掉

有序和无序列表标签可以互相嵌套，可以将有序和无序嵌套在li中

定义列表：dl里面加dt和dd标签，dt指的是标题，也可以说是被定义的内容，而dd指的是对标题的描述

超链接标签

自带下划线和字体色为蓝色，属于行内元素

a标签总共两个作用：跳链接和跳指定的位置

属性：href控制跳转地址 target控制跳转网页打开方式默认值_self 在当前窗口打开，如果是_blank，则新开一个窗口在空白页面打开

如果用a标签去包裹img标签，则图片会成为一个超链接点击跳转的按钮

跳转到指定位置：用#加上锚点位置名称，通常用于底部跳顶部，或者顶部跳底部，实现当前页面快速定位

<a name="dingwei">被定位的锚</a>

<a href="#dingwei">跳转定位位置</a>

如果这个href的值只写一个#号，则是跳转到当前页面的最顶部

这个name属性也可以定义在iframe中，这样跳转的时候，就会将内容展示到iframe页面

图片标签

img标签：

使用src属性指定图片路径

（./：代表当前目录 ../:代表上一级目录）

width,height指定图片宽高

alt是加载失败图片时的提示内容

img默认的大小为图片的分辨率

框架页iframe标签

iframe标签，页面中引入另外一个页面，属于行内块标签，设置宽高有效，且不占一整行

属性src引入另一个页面的地址：例如：https://www.baidu.com

表格标签

总诉

在HTML中，使用table标签来创建一个表格

在table标签中使用tr来表示表格中的一行，有几行就有几个tr

在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

在表格中嵌套表格是在td中嵌套table，也可以嵌套其他的内容

td中的两个重要属性：

rowspan用来设置纵向的合并单元格，跨行

colspan横向的合并单元格，跨列

表格的一些样式

margin: 0 auto 表格在父元素内居中显示

table的属性：（下面写的是style里面的属性，如果是标签中的属性名称有点不同，效果是相同的）

border:边框宽度

height:表格高度

width:表格宽度

background-color（bgcolor）:设置表格背景颜色

text-align：设置单元格中内容位置

margin:0 auto或者align:center;设置整个表格在父元素中居中显示

border-spacing:设置单元格之间的距离，如果指定为0，则单元格的线会合为一条

table中属性：

cellpadding：设置单元格内容与单元格边框的距离

cellspacing：设置单元格之间的距离（等同style中的border-spacing）

比如table与td同时设置了border:1px solid black

table和td边框之间默认有一个距离

通过border-spacing属性可以设置这个距离：border-spacing:0px

但是这样会让两个边框宽度合一，变成2px；这时候就可以用border-collapse，

border-collapse可以用来设置表格的边框合并变成1px，如果设置了边框合并，则border-spacing自动失效

两个小技巧：

隔行变色：even是奇数行变色，odd是偶数行变色，如果具体第几行就写数字

tr:nth-child(even){（注：tr为选中元素）

background-color: #bfa;

}

nth-last-child(odd)

和上面两个达到相同效果的就是

nth-last-of-type和nth-of-type跟上面两个用法是一样的

长表格

有一些情况下表格是非常的长的，

这时就需要将表格分为三个部分，表头，表格的主体，表格底部

在HTML中为我们提供了三个标签：

    thead 表格的标题

    tbody 表格的内容

    tfoot 表格底部



这三个标签的作用，就来区分表格的不同的部分，增强可读性，他们都是table的子标签，

都需要直接写到table中，tr需要写在这些标签当中，而th和td写在tr当中

thead中的内容，永远会显示在表格的头部

tfoot中的内容，永远都会显示表格的底部

tbody中的内容，永远都会显示表格的中间

通过这三部分进行分组，让其耦合性降低，维护起来更方便

如果表格中没有写tbody，浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素

CSS无法通过table > tr 无法选中行需要通过tbody > tr
<table>
	<thead>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>成绩</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>001</td>
			<td>张三</td>
			<td>100</td>
		</tr>
		<tr>
			<td>002</td>
			<td>李四</td>
			<td>80</td>
		</tr>
	</tbody>
</table>

换行标签br

一个br标签表示一个回车，该标签不包裹任何内容，没有结束标签

小菜鸟的编程路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

Html简介超文本标记语言HTML：关心的是标签的语义，至于样式交给css控制即可（假如一些字用h1标签包着，那代表他是内容标题，至于样式，css随便设置，所以html不管样式，只管它这一块代表的含义是什么）超文本：超出文本范畴标记语言：由标签构成的语言。<标签名称>操作思想：为了操作数据，都需要对不同的数据进行不同标签的封装（HTML），通过标签中的属性对封装的数据进行操作，标签就相当于一个容器，对容器中的数据进行操作，就是在不断改变容器的属性值（CSS）Html发展
复制链接

扫一扫