您的位置: 首页 > IT文章 > WEB开发基础(HTML篇)

WEB开发基础(HTML篇)

分类: IT文章 • 2025-01-15 19:05:37

# 前端常用的基础性语言

html: 搭建整个网页（骨架，一堆的标签）

css: 修饰网页，网页漂亮（样式）

JavaScript:使网页发生行为（逻辑）

jquery 库

write less, do more

js库

bootstrap 前端框架

整合:html+css+js

Vue React 其他框架

HTML的历史发展过程

WEB开发基础(HTML篇)

HTML是什么？

HyperText Makeup Language 超文本标记语言

# Html常用标签

标签样式展示: <a>文本内容 </a>

a 超链接标签 anchor 锚点 = <a>

href 属性

title 悬浮在超链接文字标题描述

WEB开发基础(HTML篇)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>超链接跳转邮箱</title>
 5 </head>
 6 <body>
 7     <p id="top"></p>
 8 <a href="https://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a>
 9 
10 </body>
11 </html>

View Code

# 让a标签新开一个网页

target="_self"(默认值)

1 <a href="https://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a>

View Code

# 当前网页进行跳转至顶部

id 属性一个网页里面id是唯一且可以自定义的

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>超链接跳转测试</title>
 5 </head>
 6 <body>
 7     <p id="top"></p>
 8 <a href="https://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a>
 9 <p>我是信息xxxx</p>
10 <p>我是信息xxxx</p>
11 <p>我是信息xxxx</p>
12 <p>我是信息xxxx</p>
13 <p>我是信息xxxx</p>
14 <p>我是信息xxxx</p>
15 <p>我是信息xxxx</p>
16 <p>我是信息xxxx</p>
17 <p>我是信息xxxx</p>
18 <p>我是信息xxxx</p>
19 <p>我是信息xxxx</p>
20 <p>我是信息xxxx</p>
21 <p>我是信息xxxx</p>
22 <p>我是信息xxxx</p>
23 <p>我是信息xxxx</p>
24 <p>我是信息xxxx</p>
25 <p>我是信息xxxx</p>
26 <p>我是信息xxxx</p>
27 <p>我是信息xxxx</p>
28 <p>我是信息xxxx</p>
29 <p>我是信息xxxx</p>
30 <p>我是信息xxxx</p>
31 <p>我是信息xxxx</p>
32 <p>我是信息xxxx</p>
33 <p>我是信息xxxx</p>
34 <p>我是信息xxxx</p>
35 <p>我是信息xxxx</p>
36 <p>我是信息xxxx</p>
37 <p>我是信息xxxx</p>
38 <p>我是信息xxxx</p>
39 <p>我是信息xxxx</p>
40 <p>我是信息xxxx</p>
41 <p>我是信息xxxx</p>
42 <p>我是信息xxxx</p>
43 <p>我是信息xxxx</p>
44 <p>我是信息xxxx</p>
45 <p>我是信息xxxx</p>
46 <p>我是信息xxxx</p>
47 <p>我是信息xxxx</p>
48 <p>我是信息xxxx</p>
49 <p>我是信息xxxx</p>
50 <p>我是信息xxxx</p>
51 <p>我是信息xxxx</p>
52 <p>我是信息xxxx</p>
53 <p>我是信息xxxx</p>
54 <p>我是信息xxxx</p>
55 <p>我是信息xxxx</p>
56 <p>我是信息xxxx</p>
57 <p>我是信息xxxx</p>
58 <p>我是信息xxxx</p>
59 <p>我是信息xxxx</p>
60 <p>我是信息xxxx</p>
61 <p>我是信息xxxx</p>
62 <p>我是信息xxxx</p>
63 <p>我是信息xxxx</p>
64 <p>我是信息xxxx</p>
65 <p>我是信息xxxx</p>
66 <p>我是信息xxxx</p>
67 <p>我是信息xxxx</p>
68 <p>我是信息xxxx</p>
69 <p>我是信息xxxx</p>
70 <p>我是信息xxxx</p>
71 <p>我是信息xxxx</p>
72 <p>我是信息xxxx</p>
73 <p>我是信息xxxx</p>
74 <p>我是信息xxxx</p>
75 <a href="#top">回到顶部</a>
76 </body>
77 </html>

View Code

# a标签跳转邮箱

href="mailto:xxx@xx.com"

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>超链接跳转邮箱</title>
 5 </head>
 6 <body>
 7     <p id="top"></p>
 8 <a href="https://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a>
 9 <a href="mailto:hopelove16@163.com">联系我们</a>
10 
11 </body>
12 </html>

View Code

标题标签

h1~h6(从大到小)

ul/ol/dl/li(列表)

e.g. unordered list(无序列表) = ul

WEB开发基础(HTML篇)

1  <ul>
2 
3     <li>无序列表1 </li>
4 
5     <li> 无序列表2 </li>
6 
7     <li> 无序列表3 </li>
8 
9 </ul>

View Code

e.g. ordered list(有序列表) = ol

WEB开发基础(HTML篇)

1  <ol>
2 
3     <li> 有序列表1 </li>
4 
5     <li> 有序列表2 </li>
6 
7     <li> 有序列表3 </li>
8 
9 </ol>

View Code

e.g. definition list (定义列表) = dl definition title = dt definition description

PS: 定义列表通常有标题，并且一组的标签是 <dl> <dt> <dd>

WEB开发基础(HTML篇)

 1  <dl>
 2 
 3     <dt>自定义列表标题</dt>
 4 
 5     <dd> 自定义列表1 </dd>
 6 
 7     <dd> 自定义列表2 </dd>
 8 
 9     <dd> 自定义列表3 </dd>
10 
11 </dl>

View Code

table(表格) table row(表行) = <tr> table head(表头) = <th> table data(表格描述） = <td>

WEB开发基础(HTML篇)

 1     <table>
 2         <tr>
 3             <th>姓名</th>
 4             <th>性别</th>
 5             <th>年龄</th>
 6         </tr>
 7     <tr>
 8         <td>张三</td>
 9         <td>男</td>
10         <td>18</td>
11     </tr>
12     <tr>
13         <td>李四</td>
14         <td>女</td>
15         <td>22</td>
16     </tr>
17         <tr>
18         <td>王老五</td>
19         <td>男</td>
20         <td>70</td>
21     </tr>
22     </table>

View Code

# 改进有边框版

border 边框值为1（表示有边框）

cellspacing 间隙值为0

WEB开发基础(HTML篇)

 1 <table border="1" cellspacing="0">
 2         <tr>
 3             <th>姓名</th>
 4             <th>性别</th>
 5             <th>年龄</th>
 6         </tr>
 7     <tr>
 8         <td>张三</td>
 9         <td>男</td>
10         <td>18</td>
11     </tr>
12     <tr>
13         <td>李四</td>
14         <td>女</td>
15         <td>22</td>
16     </tr>
17         <tr>
18         <td>王老五</td>
19         <td>男</td>
20         <td>70</td>
21     </tr>
22     </table>

View Code

# 增加表格标题

caption 表格标题；放在第一个tr标签上面

WEB开发基础(HTML篇)

 1 <table border="1" cellspacing="0">
 2     <caption>表格清单</caption>
 3         <tr>
 4             <th>姓名</th>
 5             <th>性别</th>
 6             <th>年龄</th>
 7         </tr>
 8     <tr>
 9         <td>张三</td>
10         <td>男</td>
11         <td>18</td>
12     </tr>
13     <tr>
14         <td>李四</td>
15         <td>女</td>
16         <td>22</td>
17     </tr>
18         <tr>
19         <td>王老五</td>
20         <td>男</td>
21         <td>70</td>
22     </tr>
23     </table>

View Code

# 表格横向合并和纵向合并

colspan 横向合并：合并的列数（在<th>上操作）

rowspan 纵向合并：合并的行数（在<td>上操作）

WEB开发基础(HTML篇)

 1 <table border="1" cellspacing="0">
 2     <caption>表格清单</caption>
 3         <tr>
 4             <th>姓名</th>
 5             <th>性别</th>
 6             <th colspan="2">年龄和职业</th>
 7         </tr>
 8     <tr>
 9         <td>张三</td>
10         <td>男</td>
11         <td>18</td>
12         <td>工程师</td>
13     </tr>
14     <tr>
15         <td>李四</td>
16         <td>女</td>
17         <td>22</td>
18         <td>工程师</td>
19     </tr>
20         <tr>
21         <td>王老五</td>
22         <td>男</td>
23         <td rowspan="3">70</td>
24         <td>工程师</td>
25     </tr>
26     </tr>
27         <tr>
28         <td>NPC</td>
29         <td>男</td>
30 
31         <td>工程师</td>
32     </tr>
33 </tr>
34 <tr>
35     <td>GM</td>
36     <td>男</td>
37 
38     <td>工程师</td>
39 </tr>
40     </table>

View Code

form（表单）

input(输入框)

type="text"（默认）明文

type="password" 密文

placeholder="框中提示信息,e.g.请输入用户名；请输入密码"

action 提交

method="get"(默认) 、"post"

input=“submit”， value="显示的按钮文字"(默认为提交)

WEB开发基础(HTML篇)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>form标签</title>
 5 </head>
 6 <body>
 7     <!-- 默认的action的method为"get" -->
 8     <form action="https://www.baidu.com" method="post">
 9         <!-- 默认input的type属性为"text" -->
10         <input type="text" placeholder="请输入用户名">
11         <input type="password" placeholder="请输入密码">
12         <input type="submit" >
13         <input type="submit" value="立即注册">
14         <input type="submit" value="忘记密码">
15     </form>
16 </body>
17 </html>

View Code

# 美化版输入框及单选框

input type="radio" 单选框

checked="checked" 默认选中

WEB开发基础(HTML篇)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>form标签</title>
 5 </head>
 6 <body>
 7     <!-- 默认的action的method为"get" -->
 8     <form action="https://www.baidu.com" method="post">
 9         <!-- 默认input的type属性为"text" -->
10        <p> <input type="text" placeholder="请输入用户名"></p> 
11         <p> <input type="password" placeholder="请输入密码"></p>
12         <p> <input type="submit" >
13             <input type="submit" value="立即注册">
14         </p>
15         
16         <p><input type="submit" value="忘记密码"></p>
17         <p>帅哥:<input type="radio" name="sex" checked="checked"></p>
18         <p>美女:<input type="radio" name="sex"></p>
19         
20     </form>
21 </body>
22 </html>

View Code

# form表单中的按钮和普通按钮

<input type="reset" value="重置"> 用于清空textare标签里面的内容

<botton>按钮</botton> # 脱离<from>标签，单独存在

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>表单重置按钮和普通按钮</title>
 5 </head>
 6 <body>
 7 <form>
 8     <textarea rows="15" cols="15"></textarea>
 9     <p><input type="reset" value="重置"></p>
10 </form>
11 <button>普通按钮</button>
12 </body>
13 </html>

View Code

# 复选框和下拉框单选和多选

<input type="checkbox"

option selected=selected"

multiple=

</select>

WEB开发基础(HTML篇)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>form标签</title>
 5 </head>
 6 <body>
 7 <form>
 8     前端学习<input type="checkbox">
 9     Python<input type="checkbox">
10     Java<input type="checkbox">
11     Go<input type="checkbox">
12     默认选中<input type="checkbox" checked="checked">
13     C#<input type="checkbox">
14      <h2>下拉框单选</h2>
15     <p><select>
16         <option>内容1</option>
17         <option>内容2</option>
18         <option>内容3</option>
19         <option selected="selected">默认选中</option>
20         <h2>下拉框多选</h2>
21     </select>
22          <h2>下拉框多选</h2>
23     <p><select multiple="multiple">
24         <option>内容1</option>
25         <option>内容2</option>
26         <option>内容3</option>
27         <option selected="selected">默认选中</option>
28         <h2>下拉框多选</h2>
29     </select>
30     </p>
31 </form>
32 </body>
33 </html>

View Code

textarea(多行文本输入框）

rows="xx" 行数

cols=“xx” 列数

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>form标签</title>
 5 </head>
 6 <body>
 7 <form>
 8     前端学习<input type="checkbox">
 9     Python<input type="checkbox">
10     Java<input type="checkbox">
11     Go<input type="checkbox">
12     默认选中<input type="checkbox" checked="checked">
13     C#<input type="checkbox">
14      <h2>下拉框单选</h2>
15     <p><select>
16         <option>内容1</option>
17         <option>内容2</option>
18         <option>内容3</option>
19         <option selected="selected">默认选中</option>
20         <h2>下拉框多选</h2>
21     </select>
22          <h2>下拉框多选</h2>
23     <p><select multiple="multiple">
24         <option>内容1</option>
25         <option>内容2</option>
26         <option>内容3</option>
27         <option selected="selected">默认选中</option>
28         
29     </select>  
30     </p>
31     <h2>文本输入框支持多行输入</h2>
32     <p>
33         <textarea rows="10" cols="10" ></textarea>
34     </p>
35 </form>
36 </body>
37 </html>

View Code

# 特殊标签（单闭合标签）

<br> OR <br /> 换行标签

<hr>（分割线）OR </br>（换行）

<img> (图像标签）

src 路径(同级路径直接写文件名)

相对路径：

./1.png

../1.png

.../1.png

绝对路径:

file:///xx/xx/x.png

file:///c:/xx/x.png

1 <img src="1.jpg">

View Code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>图片标签</title>
 5 </head>
 6 <body>
 7 <h2>图片1 absolute path 相对路径</h2>
 8 <img src="images/1.jpg">
 9 <h2>图片2 relative path 绝对路径</h2>
10 <img src="file:///D:/Users/loki/Documents/Loki_front_end/images/1.jpg">
11 </body>
12 </html>

View Code

# 设置img 高宽度

width 宽度

height 高度

alt 当图像资源失败的时候，一个提示

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>图片标签</title>
 5 </head>
 6 <body>
 7 <h2>图片1 absolute path 绝对路径</h2>
 8 <img src="images/1.jpg">
 9 <h2>图片2 relative path 相对路径</h2>
10 <img src="file:///D:/Users/loki/Documents/Loki_front_end/images/1.jpg">
11 <h3>调用网络地址的图片并设置宽高</h3>
12 <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="150" height="150" alt="什么都没有" >
13 </body>
14 </html>

View Code

label标签的应用

WEB开发基础(HTML篇)

for: <label for="xxx"> </label> # label下面使用的属性

id: <input type="text OR password" > # input下面使用的属性

<!DOCTYPE html>
<html>
<head>
    <title>label标签的应用</title>
</head>
<body>
<h3>常规input文字版</h3>
<p>用户名：<input type="text" ></p>
<p>密码：<input type="password" ></p>
<h3>label改进版本的</h3>
<h4>可以双击"用户名"和"密码"观察不同效果</h4>
<p>
    <label for="user">用户名：(2）</label>
    <input type="text" id="user">
    <label for="pwd">密码：(2)</label>
    <input type="password" id="pwd">
</p>
</body>
</html>

View Code

div/span(网站排版布局划分)

division（区域） = div # 可以嵌套，区域划分，还可以包含大部分标签和文本

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Div标签</title>
 5 </head>
 6 <body>
 7 <div>
 8     张三
 9     <div>
10         张三儿子
11         <div>
12             张三孙子
13             <div>张三曾孙</div>
14         </div>
15     </div>
16 </div>
17 <div>李四</div>
18 <div>王老五</div>
19 </body>
20 </html>

View Code

顶部栏

导航栏：有logo的区域，叫导航栏

内容区域

底部区域：网站信息，联系我们，关于我们

WEB开发基础(HTML篇)

特殊符号对照表

HTML结构

sublime3：快捷键! + table键(需要安装emmet)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>网站标题</title>
 6 </head>
 7 <body>
 8 
 9 </body>
10 </html>

View Code

WEB开发基础(HTML篇)

PS:   (在不同浏览器上显示不同，可以做为一个空格用)

空白折叠现象：在一个段落中间如果有空格、换行、和缩进、那么在浏览器中会折叠成一个空格显示。

作业： 对某大型网站用标签进行一次整站分析

  1 <!-- 草稿内容
  2 顶部栏目
  3 left ：
  4 图片logo * 1
  5 
  6 right：
  7 
  8 form input *2
  9 a *2
 10 图片logo *1
 11 
 12 导航栏：
 13 a * 7
 14 
 15 底部栏：
 16 友情链接 * a 5
 17 left：
 18 图片logo * form img * 1
 19 a * 9
 20 版权信息 p*1
 21 咨询投诉热线 p*1
 22  -->
 23 
 24 <!DOCTYPE html>
 25 <html>
 26 <head>
 27     <title>某科技公司网站基础分析模拟</title>
 28 </head>
 29 <body>
 30     <p id="top"></p>
 31 <div> 
 32     <!-- 顶部栏目left -->
 33     <
 34     <form> 
 35         <img src="logo.jpg" href="https://xxx">
 36     </form>
 37 </div>
 38 
 39 <div>    
 40     <!-- 顶部栏目right -->
 41     <form action="https://www.baidu.com" method="post">
 42     <input type="text" placeholder="请输入关键字">
 43     <input type="submit" value="搜索">
 44     <a href="http://xxx">新浪微博</a>
 45     <a href="https://xxx">付款中心</a>
 46     </form>
 47 </div>
 48 <div>
 49     <!-- 导航栏 -->
 50     <a href="http://xxx">首页</a>
 51     <dl>
 52         <dt><a href="http://xxx">走进XX</a></dt>
 53         <dd><a href="http://xxx">xx简介</a></dd>
 54         <dd><a href="http://xxx">大事记</a></dd>
 55         <dd><a href="http://xxx">xx理念</a></dd>
 56         <dd><a href="http://xxx">xx荣耀</a></dd>
 57         <dd><a href="http://xxx">分部发展</a></dd>
 58     </dl>
 59     <a href="http://xxx">xx文化</a>
 60     <a href="http://xxx">产品服务</a>
 61     <a href="http://xxx">网站建设</a>
 62     <a href="http://xxx">新闻资讯</a>
 63     <a href="http://xxx">人力资源</a>
 64 </div>
 65 <div>
 66     <!--内容区-->
 67     <p><em>我是斜体内容！</em></p>
 68     <p>我是内容！</p>
 69     <p>我是内容！</p>
 70     <p>我是内容！</p>
 71     <p>我是内容！</p>
 72     <p>我是内容！</p>
 73     <p>我是内容！</p>
 74     <p>我是内容！</p>
 75     <p>我是内容！</p>
 76     <p>我是内容！</p>
 77     <p>我是内容！</p>
 78     <p>我是内容！</p>
 79     <p>我是内容！</p>
 80     <p>我是内容！</p>
 81     <p>我是内容！</p>
 82     <p>我是内容！</p>
 83     <p>我是内容！</p>
 84     <p>我是内容！</p>
 85     <p>我是内容！</p>
 86     <p><em>我是斜体内容！</em></p>
 87 </div>
 88 <div>
 89     <!-- 底部栏 -->
 90     <a href="http://xxx">友情链接1</a>
 91     <a href="http://xxx">友情链接2</a>
 92     <a href="http://xxx">友情链接3</a>
 93     <a href="http://xxx">友情链接4</a>
 94     <a href="http://xxx">友情链接5</a>
 95 
 96 </div>
 97 <div>
 98     <!-- 底部栏left -->
 99     <form>
100         <img src="xxxjpg" href="https://xxx">
101     </form>
102 </div>
103 <div>
104     <!-- 底部栏right -->
105     <a href="https://xxx">首页  |</a>
106     <a href="https://xxx">xx文化  |</a>
107     <a href="https://xxx">爱心公益  |</a>
108     <a href="https://xxx">公司资质  |</a>
109     <a href="https://xxx">授权代理证书  |</a>
110     <a href="https://xxx">招聘职位  |</a>
111     <a href="https://xxx">付款中心  |</a>
112     <a href="https://xxx">联系我们  |</a>
113     <a href="https://xxx">员工身份验证</a>
114 
115 </div>
116 <div>
117     <!-- 版权信息 -->
118     <p>成都xxx有限公司&copy;版权所有2002-2020 地址：xxxx</p>
119     <p>咨询及投诉热线：000-00000 邮编：61xxxx <a href="mailto:xxx@xxx.com">电子邮箱: xxx@xxx.com</a> <a href="https://beian.miit.gov.cn/">蜀ICPxxxxxxxx号</a></p>
120     <form>
121         <p><img src="xxx.jpg">工商网监</p>
122         <p><img src="xxx.jpg">传公网安备51xxxxxxxxxxxx号</p>
123     </form>
124 </div>
125 
126 <div>
127     <a href="#top"><strong>返回顶部</strong></a>
128 </div>
129 </body>
130 </html>

View Code

附录：

HTML注释：

JS/jQuery注释：

//这是单行注释
/*
这是多行注释
这是多行注释
这是多行注释
*/

css注释：

/*这是单行注释*/

/*
这是多行注释
这是多行注释
这是多行注释
*/

WEB开发基础(HTML篇)

相关推荐