HTML ⼊门学习笔记（案例+
详解）
HTML ⼊门笔记⽬录
数据库除了增删改查还有什么功能⼀、HTML 简介
1、HTML 是什么？
HTML 指的是超⽂本标记语⾔ (Hyper Text Markup Language)HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔ (markup language)标记语⾔是⼀套标记标签 (markup tag)HTML 使⽤标记标签来描述⽹页
2、什么是HTML 标签？
HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的，例如<body>和</body>有些特殊的标签必须是单个标签，例如<br>
标签对中的第⼀个标签是开始标签，第⼆个标签是结束标签
⼆、HTML ⽂档结构
1、HTML 基本结构
标签名
定义说明
<!DOCTYPE HTML>⽂档声明声明这是⼀个HTML⽂档
<html></html>HTML标签告诉⽹页浏览器，整个⽹页是从这⾥开始的，然后到结束
<head></head>⽂档的头部在head标签中必须包含title标签<title></title>⽂档的标题显⽰在搜索引擎结果中的页⾯标题
<body></body>
⽂档的主体
元素包含⽂档的所有内容
HTML ⽂档是⽤来描述⽹页的，包含 HTML 标签和纯⽂本。 HTML⽂档的后缀名必须是.html或.htm Web 浏览器的作⽤是读取 HTML ⽂档，并以⽹页的形式显⽰出它们。浏览器不会显⽰ HTML 标签，⽽是使⽤标签来解释页⾯的内容
2、⽂档类型声明标签
<html > <head >
<title >前端开发</title > </head > <body >
<h1>HTML </h1>
<p > HTML 超⽂本标记语⾔，是⽤来描述⽹页的⼀种标准语⾔。</p > </body ></html >
123456789
<!DOCTYPE> 是⽂档类型声明标签 <!DOCTYPE> 声明位于⽂档中的最前⾯的位置 <!DOCTYPE> 作⽤：告诉浏览器使⽤哪种HTML版本来
null啥意思啊显⽰⽹页
3、lang 语⾔属性
en 定义语⾔为英语zh-CN 定义语⾔为中⽂
lang语⾔属性作⽤：定义当前⽂档显⽰的语⾔
4、字符集与编码
<meta>标签：元数据
charset 属性：⽤来规定 HTML ⽂档应该使⽤哪种字符编码
常⽤的编码有GB2312、GBK 和 UTF-8，UTF-8基本包含了全世界所有国家需要⽤到的字符
三、HTML 基础标签
1、标题标签
标题标签 可使内容加粗标签序号越⼩ 字号越⼤每个标题独占⼀⾏
2、段落标签
<p></p>
可以对HTML⽂档内容分为多个段落。
3、空格标签
在html代码中每输⼊⼀个 ，就表⽰⼀个空格
<html lang ="en ">
1
<meta charset ="UTF-8">
1
<body >
<h1>⼀级标签</h1> <h2>⼆级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6></body >
12345678
<body >
<p >段落标签</p > <p >段落1</p > <p >段落2</p ></body >
12345
1
4、注释标签
<!-- -->
注释的快捷键是： ctrl + / 或者 ctrl +shift + /
注释是给⼈看的，⽬的是为了更好的解释这部分代码是⼲啥的， 程序是不执⾏这个代码的
5、换⾏标签
<br>
单词缩写： break 打断 ，换⾏
在HTML中，如果希望某段⽂本强制换⾏显⽰，就需要使⽤换⾏标签<br>
6、盒⼦标签
<div> </div>和<span></span>
<div> </div>和<span></span> 是没有语义的 是我们⽹页布局主要的2个盒⼦<div> </div> ⼀⾏只能放⼀个<span></span> ⼀⾏上可以放多个
句柄的英文7、⽔平线标签
<hr/>
单词缩写： horizontal 横线
<hr/>就是创建横跨⽹页⽔平线的标签
⽔平线将段落与段落之间隔开，使得⽂档结构清晰，层次分明。
8、预格式化⽂本标签
<pre></pre>
<pre></pre>标签可定义预格式化的⽂本
预格式化⽂本就是按照我们预先写好的⽂字格式来显⽰页⾯， 保留空格和换⾏
<!-- 注释语句 -->
1 <br >
1
<div > 这是头部 </div > <span >今⽇价格</span >
1
<hr />是单标签
1
<pre >
此例演⽰如何使⽤ pre 标签 对空⾏和 空格 进⾏控制</pre >
123456789
9、⽂本格式化标签
标签
显⽰效果<strong></strong>和<b></b>
加粗<i></i>和<em></em>斜体<s></s>和<del></del>加删除线<u></u>和<ins></ins>
加下划线
<b></b>只是加粗。 <strong><strong> 除了可以加粗还有强调的意思，语义更强烈。
10、图像标签
dialog被谁收购
<img/>
语法如下：
该语法中src属性⽤于指定图像⽂件的路径和⽂件名
属性属性值说明src URL 图像的路径
alt ⽂本图像不能显⽰时的替换⽂本title ⽂本⿏标悬停时显⽰的内容
width 像素设置图像的宽度height 像素设置图像的⾼度border
数字
设置图像边框的宽度
注意：
标签可以拥有多个属性，必须写在开始标签中，位于标签名后⾯。属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。任何标签的属性都有默认值，省略该属性则取默认值。采取 键值对 的格式 key=“value” 的格式下⾯为参考代码：<img src ="图像URL " />
1
<body >
<!-- 正常的图⽚ -->< img src="D:\JPG\1.jpy"><!-- 设置图⽚的宽度 -->
< img srcm"D:\JPG\1.jpg" width="200"><!-- 设置了⾼度的标签 -->
< img src="D:\JPG\1.jpg" height="200"><!--同时设置了⾼度和宽度的标签-->
< img src="D:\JPG\1.jpg" width="100" height="200"><!-- 设置了标题的标签 -->
< img src="D:\JPG\1.jpg" title="⽩雪公主"><!-- ⽤alt 属性来显⽰图⽚未加载出来 -->< img src="D:\JPG\1.Jpg" alt="这是⼀张图⽚"></body >
1234567891011121314
11、超链接标签
属性作⽤
href 指定链接⽬标的url 地址
target
指定连接页⾯的打开⽅式，_self 为默认值，_blank 为在新窗⼝中打开
注意：
href="#"，表⽰该链接暂时为⼀个空链接
12、列表标签
javascript基础教程这本书怎么样标签名定义说明
<ol></ol>有序列表包含<li></li>，有顺序，使⽤情况较少<ul></ul>⽆序列表包含<li></li>，⽆顺序，最常⽤的列表
<dl></dl>
⾃定义列表
包含<dt>和<dd>,<dt>和<dd>⾥⾯可以放任何标签
13、表格标签
<table></table>⽤于定义⼀个表格标签。
<tr></tr> ⽤于定义表格中的⾏，必须嵌套在<table></table>标签中。<td></td> ⽤于定义表格中的单元格，必须嵌套在<tr></tr>标签中。html个人网页完整代码图片
14、表单标签
⼀个完整的表单通常由表单域，表单控件和提⽰信息三部分组成 1、表单域 <form></form>标签被⽤于定义表单域，以实现⽤户信息的收集和传递，form中的所有内容都会被提交给服务器。
<body >
<a href ="跳转⽬标" target ="⽬标窗⼝的弹出⽅式">⽂本或图像</a ></body >
123
<body > <ul >
<li >⽆序标签</li > <li >⽆序标签</li > </ul > <ol >
<li >有序标签</li > <li >有序标签</li > </ol > <dl >
<dt >⾃定义标签</dt > <dd >⾃定义标签</dd > </dl ></body >
1234567891011121314
<body > <table >
<tr > <th >姓名</th > <th >性别</th > <th >年龄</th > </tr > <tr > <td >⼩明</td > <td >男</td > <td >22</td > </tr > <tr > <td >⼩红</td > <td >⼥</td > <td >21</td > </tr > </table ></body >
1234567
发表评论