目录
HTML语言介绍
HTML: (HyperText Markup Language) 超⽂本标记语⾔
- 是⽹⻚开发的必备语⾔
- "超⽂本"就是指⻚⾯内可以包含图⽚、链接、甚⾄⾳乐、程序等⾮⽂字元素。
- "标记"就是指⻚⾯编写⽅式采⽤的是标签形式 将需要的内容包括起来。例 如： <a>www.wensong.com</a>
- 平时上⽹通过浏览器我们看到的⼤部分⻚⾯都是由html编写的。在浏览器访问⽹⻚时，可以通过 “右键/查看⽹⻚源代码”看到具体的html代码。
动态网页和静态网页
⽹⻚根据内容是否改变分为：静态⻚⾯、动态⻚⾯
静态⽹⻚
- 静态⽹⻚，随着html代码的⽣成，⻚⾯的内容和显示效果就确定了，以后基本上不会发⽣变化了，数据都是固定写死的，⻚⾯不会对数据库进⾏访问。
- 静态⽹⻚相对更新起来⽐较麻烦，适⽤于⼀般更新较少的展示型⽹站。
动态⽹⻚
- ⽽动态⽹⻚则不然，⻚⾯代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果⽽发⽣改变的。
- 凡是结合了HTML以外的⾼级程序设计语⾔和数据库技术进⾏的⽹⻚编程技术所⽣成的⽹⻚，都是动态⽹⻚。
第⼀个网页
1. 创建“⽂本⽂档”，重命名“xxx.html”。⽂件名⾃定义，扩展名为html。
2. 右键/打开⽅式/记事本，开发html⽂件，并编写如下内容
<html>
<head>
<title>这是标题</title>
</head>
<body>
这⾥⽤于显示⽹⻚内容
</body>
</html>以上使⽤的标签组成了HTML⻚⾯的基本结构，现将所有标签进⾏陈述：
- <html> 整个⻚⾯的根标签，由头和体组成。
- <head> 头标签，⽤于引⼊脚本、导⼊样式、提供元信息等。⼀般情况下头标签的内容在浏览器端都不显示。
- <body> 体标签，是整个⽹⻚的主体，我们编写的html代码基本都在此标签体内。
html语法
- HTML⽂件不需要编译，直接使⽤浏览器阅读即可
- HTML⽂件的扩展名是*.html 或 *.htm
- HTML结构都是由标签组成
- 标签名预先定义好的，我们只需要了解其功能即可。
- 标签名不区分⼤⼩写
- 通常情况下标签由开始标签和结束标签组成。例如：
- 如果没有结束标签，建议以/结尾。
VSCode使用（免费下载使用）
使⽤“记事本”开发效率低，现阶段⽐较流程的前端IDE（集成开发环境）是VSCode，为了统⼀环境，要求所有同学的都安装VSCode。
第一次打开可以安装中文插件，最左边一列，倒数第二的插件（扩展）点一下，然后搜索chinese，点击chinese language package 然后install 然后重启就变成中文页面了，哈哈哈
- 首先自己在电脑上创建一个文件夹存放项目代码
- 然后用VSCode打开这个文件夹
- 新建常用的文件夹，image存放图片，js文件夹，css存放样式
- 创建*.html文件
使⽤“VSCode”创建html⻚⾯。
在编写页面输入！然后回车就出现了以下基础代码，哈哈
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第⼀个⽹⻚</title>
</head>
<body>
使⽤VSCode, 完成第⼀个⽹⻚显示
</body>
</html>meta元文件，charset设置编码，content显示的宽度和高度，device-width表示和电脑屏幕比例相同，initial-scale设置为1.0意味着不缩放。title标签的内容会显示在可以关闭的❌左边，body的内容显示在页面。
VSCode常用插件
- live Server：可以在编写页面运行关闭代码，不必每次都要运行文件打开浏览器再效果，安装好Live Server插件后，在html编写页面右键就多了两个选项：Open with Live Server(Alt+L Alt+O) 和Stop Live Server(Alt+L Alt+C) 就是运行和终止的意思。
- Auto Rename Tag： <b>文字加粗标签</b> 想修改为 <u>文字加下划线标签</u> 时只需要修改前一个b为u后面的结束标签自动更新
- vscode-icons：安装后之前根据业务不同创建的文件夹或文件会显示相对性的图标，易于识别美观
- Project Mananger:项目管理，在项目中Ctrl+shift+P然后显示命令面板，输入save project然后输入需要保存的项目名称，一般默认当前项目，多个项目保存后就可以在最左边的项目管理器中发现并使用该项目的文件了
html常用标签
- 标题<hn></hn>,n的范围1--6，数字越大，显示越小
- 水平分割线：<hr/>
- 属性size\color <hr size="10" color="red"/>
- 字体：<font 属性名=属性值 属性名=属性值></font>
- color属性：设置字体的颜色
- 颜色取值：#xxxxxx或者colorname
- #xxxxxx表示使用红绿蓝三原色设置颜色
- 红绿蓝分别取值：00--FF，此处使用16进制。（FF相当于十进制的255）
- #000000表示黑色，#FFFFFF表示白色，#0000FF蓝色，#00FF00绿色，#FF0000红色
- color属性：设置字体的颜色
- 换行：<br/>
- 格式化：<b></b>加粗，<u>下划线</u>,<i>倾斜</i>
- 段落：<p></p>
<!-- 代码演示 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>基本标签</title>
</head>
<body>
<!-- 标题标签 -->
<h1>⼀级标题</h1>
<h3>三级标题</h3>
<h5>五级标题</h5>
<!-- ⽔平分割线 -->
<hr size=10 color="red"/>
<!-- 字体标签 -->
<font size="1" color="blue">⽂字⼤⼩为1, 颜⾊为蓝⾊</font>
<font size="7" color="blue">⽂字⼤⼩为7, 颜⾊为蓝⾊</font>
<!-- 换⾏标签 -->
<br />
<!-- 格式标签 -->
正常⽂字<b>加粗⽂字</b>, <u><i>倾斜+下划线</i></u>
<!-- 段落标签 -->
<p>我是段落1, 独⾃成为⼀段,段前段后各保留⼀个空⾏</p>
<p>我是段落2, 独⾃成为⼀段,段前段后各保留⼀个空⾏</p>
</body>
</html>图片标签
图⽚:
- 属性 src \ width \ height\ alt
- src ：指定需要显示图⽚的URL（路径）。
- alt ：图⽚⽆法显示时的替代⽂本。
- width ：设置图像的宽度。
- height ：定义图像的⾼度。
<!-- 代码演示 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图⽚标签</title>
</head>
<body>
<img src="img/1.jpg" width="600" height="300"/>
<img src="img/registImg" alt="图⽚加载失败,你才能看到我哦!"/>
</body>
</html>
列表标签
- <ol> 定义有序列表。
- type 列表类型，取值：A、a 、I 、i 、1 等
- <ul> 定义⽆序列表。
- type 符号的类型，取值：disc 实⼼圆、square ⽅块 、circle 空⼼圆
- <li> 定义列表项。 是 <ul> 或 <ol> 的⼦标签
<!-- 代码演示 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签</title>
</head>
<body>
<!-- 有序列表 -->
<ol type="1" start="3">
<li>百度</li>
<li>阿⾥巴巴</li>
<li>腾讯</li>
</ol>
<!-- ⽆序列表 -->
<ul type="square">
<li>百度</li>
<li>阿⾥巴巴</li>
<li>腾讯</li>
</ul>
</body>
</html>超链接标签
超链接:<a></a>
- 属性 href
- href：⽤于确定需要显示⻚⾯的路径（URL）
- target：确定以何种⽅式打开href所设置的⻚⾯。常⽤取值：blank、self 等
- _blank 在新窗⼝中打开href确定的⻚⾯。
- _self 默认。使⽤href确定的⻚⾯替换当前⻚⾯。
- target：确定以何种⽅式打开href所设置的⻚⾯。常⽤取值：blank、self 等
生成3个元素超链接的无须列表快捷键：ul>li*3>a 然后回车
<!-- 代码演示 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接标签</title>
</head>
<body>
<!-- ⽆序列表 -->
<ul type="square">
<li><a href="https:\\www.baidu.com" target="_blank">百度</a></li>
<li><a href="https:\\www.jd.com" target="_self">京东</a></li>
<li><a href="https:\\www.qq.com">腾讯</a></li>
</ul>
</body>
</html>表格标签
- <table> 标签⽤于定义表格，相当于整个表格的容器。
- border 表格边框的宽度。
- width 表格的宽度。
- bgcolor 表格的背景颜⾊。
- cell spacing 单元格边线之间的的距离。
- cell padding 单元格内容与单元格边线之间的距离。
- <tr> 标签⽤于定义⾏
- align 单元格内容的⽔平对⻬⽅式, 取值：left 左 、right 右、center 居中。
- <td> 标签⽤于定义表格的单元格
- <th> 标签⽤于定义表头。单元格内的内容默认居中、加粗。
<!-- 代码演示 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<!-- 3x3表格 三⾏三列 -->
<table width ="200" border="1" >
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-2</td>
</tr>
</table>
<br />
<table width ="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-2</td>
</tr>
</table>
</body>
</html>
表格标签-单元格合并
标签⽤于定义表格的单元格
- colspan 单元格可横跨的列数。
- rowspan 单元格可竖跨的⾏数。
快捷键生成三行三列表格table>tr*3>td*3
<!-- 代码演示 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<!-- 3x3表格 三⾏三列 -->
<table width ="200" border="1" >
<tr>
<!-- 跨列合并 1x3 -->
<td colspan="3">1-1</td>
<!-- <th>1-2</th>
<th>1-3</th> -->
</tr>
<tr>
<!-- 跨⾏合并 2x1 -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!-- <td>3-1</td> -->
<td>3-2</td>
<td>3-2</td>
</tr>
</table>
</body>
</html>
扫一扫
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
