学习地址:
【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili
1、前端格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><!--此处为网站的名称--></title>
</head>
<body>
<!-- 此处为网站的内容设置
-->
</body>
</html>
2、常用标签
HTML页面是由标签组成,不同的不同标签游览器对其进行不同的样式和内容的渲染,我们只需要记住常见的标签即可,大致可以分为以下几类,标题、水平线、段落、换行、图片、表格、超链接、列表、div和span等。
2.1标签和水平线
2.1.1标签
h1~h6标签可定义标题,标题依次递减。
<!--
此处为网站的内容设置
-->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
2.1.2水平线
hr标签在HTML页面创建一条水平线可以在视觉上将文档分割成各个部分,在HTML中,hr标签没有结束标签。
<hr color=" " size = " " width=" " align=" "/>
<!--
水平线标签
hr 单标签
常用属性
color 颜色
size 粗细
width 长度(百分比或 px)
-->
<hr>
<hr color="aqua" size = "3" width="50%" align="left"/>
2.2段落和换行
段落标签,会自动在其前后创建一些空白,游览器会自动添加这些空间。
<p>content</p>
<!--
段落标签
-->
<p>这是一个段落1</p>
<p>这是一个段落2</p>
2.3列表
列表分为有序列表和无序列表
<!--
列表
有序列表
<ol><li><li></ol>
无序列表
<ul><li><li></ul>
-->
<ul type="circle">
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
<ol type="i">
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ol>
2.4div和span
2.4.1div
div是一个块级元素,通常与css配合使用,用于布局。
div标签可以把文档分成独立的不同的部分。它可以用作严格的组织工具,并且不使用任何形式与其相关联
<div>content</div>
<!--
div标签
块级元素
默认占全部的宽度,有多少内容占多少
可以设置div的宽(width)高(height)
通过align设置对齐方式
-->
<div style="width: 100px;height:100px" align="center">这是一个div</div>
2.4.2span
span标签被用来组织文档中的行内元素,span没有固定的格式表现,当对他应用样式时,他才会产生视觉上的变化。
<span>content</span>
<!--
span标签
行内元素不会自动的换行,有多少东西占用多少空间
-->
<span>这是一个span</span>
2.5格式化标签
2.5.1font
对丁文本的字体,字体尺寸,字体颜色
<font color=" " size=" " face=" ">content</font>
<font color="aqua " size="5" face="楷体">你好</font><br>
2.5.2pre
规定与格式的文本,被包围在pre元素的文本通常会保留空格和换行符,二文本也会呈现为等宽的字体
<pre>content</pre>
<pre>
Hello World
</pre>
2.5.3文本标签
b(组文本)、i(斜体文本)、u(下划线文本)、del(中划线文本)、sub(下标文本)、sup(上标文本)
<p>以后的你<b>会感谢</b><i>现在的</i><u>努力的自己</u><del>我</del></p>
<pre>
<font size="5" color="aqua">水的化学式是 H<sub>2</sub>O</font>
<font size="5" color="aqua">二的三次方可以表示为:2<sup>3</sup></font>
</pre>
2.6a标签
a标签定义超链接,用于一张页面连接到另一张页面
a元素最重要的属性是href属性,他表示要链接的目标位置,同时没有href属性a标签内的内容与普通文本没有区别,也就失去了超链接的功能。
若是想要跳转到当前页面,那么href的值为#,被链接页面通常是在当前游览器窗口中,除非规定了另一个目标(target属性)
<a href ="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
2.7图片
img元素
<img src=" ">
<!--
img标签
向网页中嵌入一张图片
常用属性
src:需要引入的图片地址(必须属性)
alt:当照片破损或者不存在时,显示文本的内容
title:当鼠标悬停在图片上时显示的文本
width:图片的宽度
height:图片的高度
border:图片边框
-->
<img src="../img/bd3.png">
2.8表格
table标签定义HTML表格
tr标签定义表格的行,tr元素包含一个或多个th或td元素
td标签定义HTML表格中的标准单元格
th定义表格内的表头单元格,th元素内部的文本通常会呈现为居中的粗体文本,而td元素内的文本通常是左对齐的普通文本。table就相当于是一个表格的外框,tr为行,td为一个一个单元格,th为有标题作用的单元格,th中的内容同时有加粗的效果。
<table width=" " align=" " border=" " style=" ">
<!--
table 表格
tr 行
td 标准单元格
<th> 表头(字体剧中,加粗效果)
table的属性
width 表格的宽度
border 边框
align 对齐方式
style="border-collapse: collapse;"合并表格边框
-->
<table width="400px" align="center" border="1" style="border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
</tr>
</table>