梅科尔工作室-第一次网页前端培训笔记（HTML常用标签）

学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

1、安装编译器

vs hBuilder X等等(本人主要使用hB)

2、HTML基本框架

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的html第一篇笔记</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

标记头区，内容区<body> ，网页区<html> ，总体主要格式

3、标签

（1）标题标签

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

从一到六字体越来越小。且其放在内容区（也就是两个body之间）。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>

（2）段落标签

HTML 段落是通过标签 <p> 来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

<p> 和</p>就像是一段的开头和结尾，中间输入内容就行了，

同理，到下一个<p>时就自动换行了。

(3)链接标签

HTML 链接是通过标签 <a> 来定义的。

<a href="http://www.zzuli.edu.cn/">这是一个链接</a>

在网页上显示的就是后面的“这是一个链接” 然后点击可以跳转。

常用属性
           href 需要跳转的地址
               target 窗口打开的方式
               _self:当前窗口
                   —_blank:在空白标签

（4）换行标签

如果

how<br>are you

希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：如图

这种情况输出

“how

are you ”中间有空行。但是在一个<p>里面不是新的段落。

（5）水平线标签

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

<p>yyds!!!。</p>
<hr>
<p>yyds!!!!!。</p>
<hr>

出来就是这样的：

（6）列表

1.有序列表：

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。type可以改变样式

2.无序列表：

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul> 标签，type可以改变样式

（7）div和span

1.div

div 元素是用于分组 HTML 元素的块级元素。大多数网站可以使用 <div> 或者 <table> 元素来创建多列。默认占全部的宽度，有多少内容高度占多少，可以设置div的宽（width）高（height），通过align设置内容的对齐方式。

2.span

<span> 用于对文档中的行内元素进行组合。<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。提示：被 <span> 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

<span>这是一个span</span>

（8）格式化标签

<font>标签规定：这仨： color 字体颜色 size 字体大小 face 字体风格
<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
b.加粗 i.倾斜 u.下划线 del.中划线 sup.上标 sub.下标

(9) img标签

img标签：向网页中嵌入一张图标

常用属性：srg：需要引入的图片的地址（必须属性）

alt：当图片破损或不存在时，显示的文本

title ：当鼠标悬停在图片上时显示的文本

width：图片宽度

height：图片高度

border：图片边框

<img src="img/图片1.jpg" width="500" height="400" border="2" title="图片1"alt="图片"/>

（10）表格标签

table表格：
tr 行    td 标准单元格     th 表头(字体居中、加粗效果)

table的属性：
width 表格的宽度 border 边框   align 对齐方式

<table width="500px" align="center" border="1" style="border-collapse: collapse;"><tr align="center"bgcolor="antiquewhite"><th>编号</th><th>姓名</th><th>年龄</th></tr><tr><th>1</th><th>玉皇大帝</th><th>6666</th></tr><tr><th>2</th><th>女娲娘娘</th><th>9999</th></tr><tr><th>3</th><th>紫薇圣人</th><th>3333</th></tr></table>