html总结_html 尖括号-CSDN博客

本文链接：https://blog.csdn.net/XYX153/article/details/125994444

这篇博客详细总结了HTML的相关知识，包括文字样式、装饰、大小写转换，间距的阴影效果和字体样式，超链接的使用，锚点操作，图片处理，div盒子模型，块级与行内标签的区别，列表的创建与嵌套，表格的基础和合并技巧，以及head内容的设置，是HTML初学者的必备参考资料。

摘要由CSDN通过智能技术生成

标签（节点，元素）

html文件中，尖括号括起来的部分就是标签，如：html, head, body
特点：
成对出现，如：
标签的开始部分，除了标签名字外，还有可能有属性，如<html lang="en"> 里的 lang="en"就是
属性，属性的格式： 属性名="属性值" ，属性值用引号括起来
HTML中的标签是树状结构，所以有父子标签，兄弟标签的概念
一对标签中间内容称为标签体，如：
这个内容就是标签体
标签名一般都是用小写字母，但是它对大小写不敏感。如果多个单词组成的标签或属性，单词之间
用中杠（
-）分割
常用标签
注释
快捷键： Ctrl + /
span
文本标签，标签体里面放文字内容
br
换行, 它是单标签，没有标签体
b
加粗文字显示
i
斜体
u
添加下划线
strong
强调，加粗显示
<!-- 注释，用于程序员辅助理解代码的说明文字，浏览器不会简析注释内容 -->
<!-- 文字标签，用于处理文字 -->
<span>便于设置文字的样式</span>
<!-- 单标签，没有标签的结束标签，在右尖括号前面添加/来结束标签 -->
<br/>
有许多的文字，会显示在一行，超过浏览器的宽度才会自动换行。
<br/>
有许多的文字，会显示在一行，超过浏览器的宽度才会自动换行。
<span>这个内容很重要，<b>重要的事说三遍，重要的事说三遍，重要的事说三遍</b> </span>
<i>斜体</i>
<u>下划线</u>
<strong>着重强调</strong>h1~h6
标题，加粗加大显示文字，h1到h6字体是从大到小。独占一行（会自动换行）
p
段落，也会换行
ins
文字添加下划线
del
文字添加删除线
sup
sub
pre
预览，把源代码里面的格式原封不动的显示出来
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落标签，内容会换行，用于文章的自然段</p>
<!-- ins (insert) -->
<ins>文字添加下划线，类似u标签</ins>
<!-- del (delete),给文字添加删除线 -->
<del>删除线</del>
<!-- 上标，如用于平方， 指数等 -->
x<sup>2</sup>
<!-- 下标，如用于化学分子式 -->
H<sub>2</sub>Ohr
分割线

文字的样式

CSS (Cascading Style Sheets), 层叠样式表，用来设置标签的显示效果

样式写在 head 标签里的 style 标签中， class 对应的样式名称以 . 开头，样式写在大括号中，每一个样

式格式如下：样式属性 : 样式值 ; 一个样式名中可以写多行样式

标签中使用样式，给标签添加 class 属性， class 属性的值就是 style 中定义的样式名称（不包含 . ）

文字的装饰

上划线，下划线，删除线

/* 下划线，相当于 ins 标签 */

/* text-decoration: underline; */

/* 上划线 */

/* text-decoration: overline; */

/* 删除线，相当于 del 标签 */

text-decoration : line-through

文字大小写的转换（西文字符才有作用）

/* 所有字母转大写 */

/* text-transform: uppercase; */

/* 所有字母转小写 */

/* text-transform: lowercase; */

/* 所有单词首字母大写 */

text-transform : capitalize ;

间距

/* 段落（ p ）第一行缩进，对 span 标签无效 */

text-indent : 32px ;

/* 字符间的距离，英文单词的字母之间也有距离 */

/* letter-spacing: 8px; */

/* 字间距，英文单词当成一个字 */

word-spacing : 8px ;

/* 行高（设置行距） , 值是倍数，不带单位， 1 是正常行高 */

line-height : 2 ;

/* 设置文字不换行 */

white-space : nowrap ;

阴影效果

font-size : 25px ;

/* 第一个值水平方向的偏移距离；第二个值是垂直方向的偏移距离；这两个值可以设为负数

第三个值是阴影的颜色 */

text-shadow : -2px -5px red ;

字体样式

/* 1em 等于 16px ， em 作为单位时可以设置小数（设置标准字体的倍数） */

font-size : 1.5em ;

/* 选择字体 */

font-family : 黑体 ;

/* 斜体 */

font-style : italic ;

/* 粗体 */

font-weight : bold ;

/* 字体的简化设置，顺序： font-style font-weight font-size/line-height

font-family

其它可以省略，但是至少要写 font-size 和 font-family */

font : italic bold 3em 宋体

a 超链接

a 标签可以连接内部页面，外部页面，文件，图片等

连接页面可以在当前窗口，新窗口， iframe 窗口中打开

<!-- 链接到外部页面，页面地址写在href属性中 -->
<a href="https://www.baidu.com/">百度</a>
<br>
<!-- 链接到内部页面（项目内部）,直接写页面的文件名 -->
<a href="文字样式.html">文字样式</a>
<br>
<!-- 链接到文件，点击后会下载文件 -->
<a href="download.rar">下载文件</a>
<br>
<!-- 链接到图片，也能正常显示。
./ 表示当前目录，因为1.png在img子目录下，所以路径加上img -->
<a href="./img/1.png">链接到图片</a>
<br>
<!-- 在新窗口中打开链接的页面
target="_blank" 新窗口
target="_self" 当前窗口，默认值
-->
<a href="./2.练习.html" target="_self">在新窗口中打开页面</a>
<br>
<!-- 在指定的iframe窗口打开页面，target设为iframe的name -->
<a href="http://hqyj.com/" target="win">在iframe窗口中打开页面</a>
<br>
<!-- 内嵌在页面中浏览器窗口，通过src指定显示的页面 -->
<iframe src="http://www.w3schools.cn/" frameborder="0" name="win"></iframe>