首页分享前端===>HTML

前端===>HTML

来源：花匠小妙招时间：2024-12-07 19:20

html基本结构

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html>  123456789101112

快捷键 !+tab

html标签

通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

<h1>这是一级标题 <h2>这是二级标题 <h3>这是三级标题 <h4>这是四级标题 <h5>这是五级标题 <h6>这是六级标题 123456
html段落标签

<p>一个段落含有默认的上下间距

html换行标签

<br>
直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入
来强制换行

html字符实体

&nbsp 空格的字符实体 html中只能输入一个空格,在段落前想缩进两个文字的空格
“<” 和 “>” 的字符实体为 < 和 >
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体

html块标签、含样式的标签 html块标签

1、<div> 标签块元素，表示一块内容，没有具体的语义。

2、<span> 标签行内元素，表示一行中的一小段内容，没有具体的语义。

含样式和语义的标签

1、<em> 标签行内元素，表示语气中的强调词

2、<i> 标签行内元素，表示专业词汇

3、<b> 标签行内元素，表示文档中的关键字或者产品名

4、<strong> 标签行内元素，表示非常重要的内容

html图像标签、绝对路径和相对路径 html图像标签

<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

src属性定义图片的引用地址alt属性定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
<img src="images/pic.jpg" alt="产品图片" /> 绝对路径和相对路径绝对地址：相对于磁盘的位置去定位文件的地址相对地址：相对于引用文件本身去定位被引用的文件地址./ 表示当前文件所在目录下../ 表示当前文件所在目录下的上一级目录 html链接标签

<a> 标签可以在网页上定义一个链接地址，它的常用属性有：

href 属性定义跳转的地址title 属性定义鼠标悬停时弹出的提示文字框target 属性定义链接窗口打开的位置 target="_self" 缺省值，新页面替换原来的页面，在原来位置打开target="_blank" 新页面会在新开的一个浏览器窗口打开

<a href="#"></a>  <a href="http://www.baidu.com/" title="跳转到百度的链接">百度</a> <a href="2.html" target="_blank">测试页面2</a> 123

a链接标签默认有下划线此时我们需要去除下划线

/* 去掉下划线 */ a{text-decoration:none;} 12 html列表有序列表每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。

<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ol> 12345 无序列表在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

<ul> <li><a href="#">新闻标题一</a></li> <li><a href="#">新闻标题二</a></li> <li><a href="#">新闻标题三</a></li> </ul> 12345

去掉小圆点的css代码

/* 去掉小圆点以及数字 */ ul,ol{list-style:none; } 1234 定义列表定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释

<h3>前端三大块</h3> <dl> <dt>html</dt> <dd>负责页面的结构</dd> <dt>css</dt> <dd>负责页面的表现</dd> <dt>javascript</dt> <dd>负责页面的行为</dd> </dl> 123456789101112

具体效果如图
在这里插入图片描述