您现在的位置是：首页 > 技术教程 正文

前端 --- HTML

admin 阅读： 2024-03-28
后台-插件-广告管理-内容页头部广告（手机）

1. HTML 结构

1.1 HTML 文件基本结构

  1. <html>
  2. <head>
  3. <title>第一个html程序</title>
  4. </head>
  5. <body>
  6. hello world!
  7. </body>
  8. </html>
  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写页面的属性.
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题
  • head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
  • title 是 head 的子标签. head 是 title 的父标签.
  • head 和 body 之间是兄弟关系.

标签之间的结构关系, 构成了一个 DOM 树
D: Document 文档 O: Object 对象 M: Model 模型

1.2 VsCode 中 使用 HTML 的快捷键

使用 ! + TAB 快速生成代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  11. </body>
  12. </html>
  •  称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
  •  其中 lang 属性表示当前页面是一个 “英语页面”. 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).
  •  描述页面的字符编码方式. 没有这一行可能会导致中文乱码.
  • name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
  • content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).

2. HTML 常见标签

2.1 注释标签

2.2 标题标签

有六个,从 h1 ~ h6,数字越大,则字体越小

  1. <h1>一级标题</h1>
  2. <h2>二级标题</h2>
  3. <h3>三级标题</h3>
  4. <h4>四级标题</h4>
  5. <h5>五级标题</h5>
  6. <h6>六级标题</h6>

2.3 段落标签

p标签表示一个段落

  1. <p>第一段</p>
  2. <p>第二段</p>
  3. <p>第三段</p>

2.4 换行标签

br 是一个单标签,不需要结束标志.
是规范写法.

  1. <p>第一段 Lorem ipsum dolor sit amet consectetur adipisicing elit. <br/>
  2. Velit delectus sint vero minus architecto, tempora in <br/>
  3. us voluptatibus quaerat nobis, veniam ea optio.</p>

%20
描述标记
加粗...
%20...
倾斜...
%20...
删除线...
%20...
下划线...
%20...
%20
  1. %20%20%20%20<strong>加粗1</strong>
  2. %20%20%20%20<b>加粗2</b>
  3. %20%20%20%20<em>倾斜1</em>
  4. %20%20%20%20<i>倾斜2</i>
  5. %20%20%20%20<del>删除线1</del>
  6. %20%20%20%20<s>删除线2</s>
  7. %20%20%20%20<ins>下划线1</ins>
  8. %20%20%20%20<u>下划线2</u>
%20

%20

2.6 图片标签

img 标签 必须带有 src 属性, 表示图片的路径
img 标签的其他属性

  • alt: 替换文本. 当图片不能正确显示的时候, 会显示一个替换的文字.
  • title: 提示文本. 鼠标放到图片上, 就会有提示.
  • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
<img src="1.jpg"alt="hello" title="鬼灭之刃" width="1000px" hight="1300px" border="5px">

%20 2.7%20超链接标签%20

a%20标签的属性

%20
  • href:%20必须具备,%20表示点击后会跳转到哪个页面.
  • target:%20打开方式.%20默认是%20_self.%20如果是%20_blank%20则用新的标签页打开.
  1. %20%20%20%20<a%20href="http://www.baidu.com">百度</a>
  2. %20%20%20%20<a%20href="http://www.baidu.com"%20target="_block">baidu</a>
  3. %20%20%20%20<a%20href="test3.html">test3</a>
  4. %20%20%20%20<a%20href="#">###</a>
%20 2.8%20表格标签%20

%20

%20

这些属性都要放到%20table%20标签中.

%20
  • align%20是表格相对于周围元素的对齐方式.%20align=“center”%20(不是内部元素的对齐方式)
  • border%20表示边框.%201%20表示有边框(数字越大,%20边框越粗),%20“”%20表示没边框.
  • cellpadding:%20内容距离边框的距离,%20默认%201%20像素
  • cellspacing:%20单元格之间的距离.%20默认为%202%20像素
  • width%20/%20height:%20设置尺寸.
  1. %20%20%20%20<table%20border="1"%20align="center"%20cellpadding='20'%20cellspacing='1'%20width='600'%20height='600'>
  2. %20%20%20%20%20%20%20%20<tr>
  3. %20%20%20%20%20%20%20%20%20%20%20%20<th>姓名</th>
  4. %20%20%20%20%20%20%20%20%20%20%20%20<th>性别</th>
  5. %20%20%20%20%20%20%20%20%20%20%20%20<th>成绩</th>
  6. %20%20%20%20%20%20%20%20</tr>
  7. %20%20%20%20%20%20%20%20<tr>
  8. %20%20%20%20%20%20%20%20%20%20%20%20<td>张三</td>
  9. %20%20%20%20%20%20%20%20%20%20%20%20<td>男</td>
  10. %20%20%20%20%20%20%20%20%20%20%20%20<td>98</td>
  11. %20%20%20%20%20%20%20%20</tr>
  12. %20%20%20%20%20%20%20%20<tr>
  13. %20%20%20%20%20%20%20%20%20%20%20%20<td>李四</td>
  14. %20%20%20%20%20%20%20%20%20%20%20%20<td>女</td>
  15. %20%20%20%20%20%20%20%20%20%20%20%20<td>97</td>
  16. %20%20%20%20%20%20%20%20</tr>
  17. %20%20%20%20</table>

%20

合并单元格

%20
  • 跨行合并: rowspan="n"
  • 跨列合并: colspan="n"
  1. %20%20%20%20<table%20border="1"%20align="center"%20cellpadding='20'%20cellspacing='1'%20width='600'%20height='600'>
  2. %20%20%20%20%20%20%20%20<tr>
  3. %20%20%20%20%20%20%20%20%20%20%20%20<th>姓名</th>
  4. %20%20%20%20%20%20%20%20%20%20%20%20<th>性别</th>
  5. %20%20%20%20%20%20%20%20%20%20%20%20<th>成绩</th>
  6. %20%20%20%20%20%20%20%20</tr>
  7. %20%20%20%20%20%20%20%20<tr>
  8. %20%20%20%20%20%20%20%20%20%20%20%20<td>张三</td>
  9. %20%20%20%20%20%20%20%20%20%20%20%20<td%20colspan%20=%20'2'>男</td>
  10. %20%20%20%20%20%20%20%20</tr>
  11. %20%20%20%20%20%20%20%20<tr>
  12. %20%20%20%20%20%20%20%20%20%20%20%20<td>李四</td>
  13. %20%20%20%20%20%20%20%20%20%20%20%20<td%20rowspan="2">女</td>
  14. %20%20%20%20%20%20%20%20%20%20%20%20<td>97</td>
  15. %20%20%20%20%20%20%20%20</tr>
  16. %20%20%20%20%20%20%20%20<tr>
  17. %20%20%20%20%20%20%20%20%20%20%20%20<td>王五</td>
  18. %20
  19. %20%20%20%20%20%20%20%20%20%20%20%20<td>97</td>
  20. %20%20%20%20%20%20%20%20</tr>
  21. %20%20%20%20</table>

%20 2.9%20列表标签%20

%20

%20
  1. %20%20%20%20<h3>无序列表</h3>
  2. %20%20%20%20<ul>
  3. %20%20%20%20%20%20%20%20<li>苹果</li>
  4. %20%20%20%20%20%20%20%20<li>西瓜</li>
  5. %20%20%20%20%20%20%20%20<li>香蕉</li>
  6. %20%20%20%20</ul>
  7. %20%20%20%20<h3>有序列表</h3>
  8. %20%20%20%20<ol>
  9. %20%20%20%20%20%20%20%20<li>星期一</li>
  10. %20%20%20%20%20%20%20%20<li>星期二</li>
  11. %20%20%20%20%20%20%20%20<li>星期三</li>
  12. %20%20%20%20</ol>
  13. %20%20%20%20<h3>自定义列表</h3>
  14. %20%20%20%20<dl>
  15. %20%20%20%20%20%20%20%20<dt>我的一天</dt>
  16. %20%20%20%20%20%20%20%20<dd>吃饭</dd>
  17. %20%20%20%20%20%20%20%20<dd>睡觉</dd>
  18. %20%20%20%20%20%20%20%20<dd>打豆豆</dd>
  19. %20%20%20%20</dl>

%20 2.10%20表单标签%20

分成两个部分:

%20
  • 表单域:%20包含表单元素的区域.%20重点是%20form%20标签.
  • 表单控件:%20输入框,%20提交按钮等.%20重点是%20input%20标签

form%20标签

%20
  1. <form%20action="test.html">
  2. ...%20[form%20的内容]
  3. </form>
%20

input%20标签

%20

各种输入控件,%20单行文本框,%20按钮,%20单选框,%20复选框.

%20
  • type(必须有),%20取值种类很多多,%20button,%20checkbox,%20text,%20file,%20image,%20password,%20radio%20等.
  • name:%20给%20input%20起了个名字.%20尤其是对于%20单选按钮,%20具有相同的%20name%20才能多选一.
  • value:%20input%20中的默认值.
  • checked:%20默认被选中.%20(用于单选按钮和多选按钮)
  • maxlength:%20设定最大长度.

①%20文本框

%20
  1. %20%20%20%20<form%20action="">
  2. %20%20%20%20%20%20%20%20<input%20type="text">
  3. %20%20%20%20</form>
%20

%20

%20

②%20密码框

%20
  1. %20%20%20%20<form%20action="">
  2. %20%20%20%20%20%20%20%20<input%20type="password">
  3. %20%20%20%20</form>
%20

%20

%20

③%20单选框

%20

注:%20这里name属性相同,才能实现多选一

%20
  1. %20%20%20%20<form%20action="">
  2. %20%20%20%20%20%20%20%20<input%20type="radio"%20name="sex"%20checked="checked">男
  3. %20%20%20%20%20%20%20%20<input%20type="radio"%20name="sex">女
  4. %20%20%20%20</form>
%20

%20

%20

④%20复选框

%20
  1. %20%20%20%20<form%20action="">
  2. %20%20%20%20%20%20%20%20<input%20type="checkbox">%20吃饭
  3. %20%20%20%20%20%20%20%20<input%20type="checkbox">睡觉
  4. %20%20%20%20%20%20%20%20<input%20type="checkbox">打豆豆
  5. %20%20%20%20</form>
%20

%20

%20

⑤%20普通按钮

%20
  1. %20%20%20%20<form%20action="">
  2. %20%20%20%20%20%20%20%20<input%20type="button"%20value="这是一个按钮"%20onclick="alert('hello')">
  3. %20%20%20%20</form>
%20

%20

%20

⑥%20提交按钮

%20
  1. %20%20%20%20<form%20action="http://www.baidu.com">
  2. %20%20%20%20%20%20%20%20<input%20type="submit"%20value="提交">
  3. %20%20%20%20</form>
%20

%20

%20

⑦%20清空按钮

%20
  1. %20%20%20%20<form%20action="http://www.baidu.com">
  2. %20%20%20%20%20%20%20%20<input%20type="text">
  3. %20%20%20%20%20%20%20%20<input%20type="submit"%20value="提交">
  4. %20%20%20%20%20%20%20%20<input%20type="reset"%20value="清空">
  5. %20%20%20%20</form>
%20

%20

%20

⑧%20选择文件

%20
  1. %20%20%20%20<form%20action="">
  2. %20%20%20%20%20%20%20%20<input%20type="file">
  3. %20%20%20%20</form>
%20

%20

%20 2.11%20label%20标签%20

搭配%20input%20使用.%20点击%20label%20也能选中对应的单选/复选框,%20能够提升用户体验.

%20
  • for%20属性:%20指定当前%20label%20和哪个相同%20id%20的%20input%20标签对应.%20(此时点击才是有用的)
  1. %20%20%20%20<label%20for="male">男</label>
  2. %20%20%20%20<input%20id="male"%20type="radio"%20name="sex">
%20

%20

%20 2.12%20select%20标签%20

下拉菜单

%20
  • option%20中定义%20selected="selected"表示默认选中
  1. %20%20%20%20<select>
  2. %20%20%20%20%20%20%20%20<option>--请选择地址--</option>
  3. %20%20%20%20%20%20%20%20<option>北京</option>
  4. %20%20%20%20%20%20%20%20<option>上海</option>
  5. %20%20%20%20%20%20%20%20<option>广州</option>
  6. %20%20%20%20%20%20%20%20<option>深圳</option>
  7. %20%20%20%20%20%20%20%20<option>广西</option>
  8. %20%20%20%20%20%20%20%20<option>西藏</option>
  9. %20%20%20%20</select>
%20

%20

%20 2.13%20textarea%20标签%20
  1. %20%20%20%20<textarea%20rows="3"%20cols="50">
  2. %20%20%20%20%20%20%20%20
  3. %20%20%20%20</textarea>
%20

%20

%20 2.14%20无语义标签:%20div%20&%20span%20

div%20标签,%20division%20的缩写,%20含义是%20分割
%20span%20标签,%20含义是跨度

%20

就是两个盒子.%20用于网页布局

%20
  • div%20是独占一行的,%20是一个大盒子.
  • span%20不独占一行,%20是一个小盒子.
  1. %20%20%20%20<div>
  2. %20%20%20%20%20%20%20%20<span>你好</span>
  3. %20%20%20%20%20%20%20%20<span>你好</span>
  4. %20%20%20%20%20%20%20%20<span>你好</span>
  5. %20%20%20%20</div>
  6. %20%20%20%20<div>
  7. %20%20%20%20%20%20%20%20<span>中国</span>
  8. %20%20%20%20%20%20%20%20<span>中国</span>
  9. %20%20%20%20%20%20%20%20<span>中国</span>
  10. %20%20%20%20</div>
%20

%20

%20 2.15%20HTML%20中特殊字符%20

空格:  
%20小于号: <
%20大于号: >
%20按位与: &

%20
  1. %20%20%20%20<h1>你好</h1>
  2. %20%20%20%20<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;qeqeqwe&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eeqw&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eqeqwe%20</p>
  3. %20%20%20%20<p>&lt;%20&gt;</p>
  4. %20%20%20%20<p>&amp;</p>
%20

%20

%20 3.%20综合案例%20 一个简易的个人简历%20
  1. <!DOCTYPE%20html>
  2. <html%20lang="en">
  3. <head>
  4. %20%20%20%20<meta%20charset="UTF-8">
  5. %20%20%20%20<meta%20http-equiv="X-UA-Compatible"%20content="IE=edge">
  6. %20%20%20%20<meta%20name="viewport"%20content="width=device-width,%20initial-scale=1.0">
  7. %20%20%20%20<title>Document</title>
  8. </head>
  9. <body>
  10. %20%20%20%20<h1>姓名某某某</h1>
  11. %20%20%20%20<h2>基本信息</h2>
  12. %20%20%20%20<img%20src="1.jpg" width="500" height="300">
  13. <p>求职意向: Java 开发工程师</p>
  14. <p>联系电话: 157-2324-4444</p>
  15. <p>邮箱: 12321312@qq.com</p>
  16. <a href= "https://gitee.com/Wangzzzzzzzzzz/dashboard/projects">我的 gitee</a>
  17. <br/>
  18. <a href= "https://blog.csdn.net/wwzzzzzzzzzzzzz?spm=1000.2115.3001.5343">我的 博客</a>
  20. <h2>教育背景</h2>
  21. <ol>
  22. <li>2006 ~ 2007 中国幼儿园</li>
  23. <li>2007 ~ 2013 中国小学</li>
  24. <li>2013 ~ 2016 中国初中</li>
  25. <li>2016 ~ 2019 中国高中</li>
  26. <li>2019 ~ 2023 中国大学</li>
  27. </ol>
  29. <h2>专业技能</h2>
  30. <ul>
  31. <li>熟练掌握 Java 语法</li>
  32. <li>熟练掌握数据结构,例如链表,二叉树,哈希表登</li>
  33. <li>熟练掌握操作系统原理,熟悉多线程编程,理解多线程安全问题</li>
  34. <li>熟练掌握网络原理,熟悉网络编程,熟悉 TCP/IP 协议栈的基本原理</li>
  35. <li>熟练掌握 MySQL 数据库,熟悉 SQL 语言,能够进行简单的增删改查操作,理解索引与事务的底层原理</li>
  36. </ul>
  38. <h2>我的项目</h2>
  39. <ol>
  40. <li>
  41. <h3>留言墙</h3>
  42. <p>开发时间: 2022年4月10日</p>
  43. <p>功能介绍:
  44. <ul>
  45. <li>支持留言发布</li>
  46. <li>支持匿名留言</li>
  47. </ul>
  48. </p>
  49. </li>
  50. <li>
  51. <h3>学习小助手</h3>
  52. <p>开放时间: 2022年5月1日</p>
  53. <p>功能介绍:
  54. <ul>
  55. <li>支持错题检索</li>
  56. <li>支持同学探讨</li>
  57. </ul>
  58. </p>
  59. </li>
  60. </ol>
  61. <h2>个人评价</h2>
  62. <p>在学校期间,学习优良</p>
  63. </body>
  64. </html>

%20 一个简易的简历信息填写%20
  1. <!doctype%20html>
  2. <html%20lang="en">
  3. <head>
  4. %20%20%20%20<meta%20charset="UTF-8">
  5. %20%20%20%20<meta%20name="viewport"
  6. %20%20%20%20%20%20%20%20%20%20content="width=device-width,%20user-scalable=no,%20initial-scale=1.0,%20maximum-scale=1.0,%20minimum-scale=1.0">
  7. %20%20%20%20<meta%20http-equiv="X-UA-Compatible"%20content="ie=edge">
  8. %20%20%20%20<title>Document</title>
  9. </head>
  10. <body>
  11. %20%20%20%20<table>
  12. %20%20%20%20%20%20%20%20<form%20action="">
  13. %20%20%20%20%20%20%20%20<h1>请填写简历信息</h1>
  14. %20%20%20%20%20%20%20%20<tr>
  15. %20%20%20%20%20%20%20%20%20%20%20%20<td>姓名</td>
  16. %20%20%20%20%20%20%20%20%20%20%20%20<td>
  17. %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<input%20type="text">
  18. %20%20%20%20%20%20%20%20%20%20%20%20</td>
  19. %20%20%20%20%20%20%20%20</tr>
  20. %20%20%20%20%20%20%20%20<tr>
  21. %20%20%20%20%20%20%20%20%20%20%20%20<td>性别</td>
  22. %20%20%20%20%20%20%20%20%20%20%20%20<td><input%20id="male"%20type="radio"%20name="sex"%20checked="checked">
  23. %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20<label%20for="male"><img%20src="male.png" width="15" height="15">男</label>
  24. <input id="female" type="radio" name="sex">
  25. <label for="female"><img src="female.png" width="15" height="15">女</label>
  26. </td>
  27. </tr>
  28. <tr>
  29. <td>出生日期</td>
  30. <td>
  31. <select>
  32. <option>--请选择年份--</option>
  33. <option>2000</option>
  34. <option>2001</option>
  35. <option>2002</option>
  36. <option>2003</option>
  37. <option>2004</option>
  38. <option>2005</option>
  39. <option>2006</option>
  40. <option>2007</option>
  41. <option>2008</option>
  42. <option>2009</option>
  43. </select>
  44. <select>
  45. <option>--请选择月份--</option>
  46. <option>1</option>
  47. <option>2</option>
  48. <option>3</option>
  49. <option>4</option>
  50. <option>5</option>
  51. <option>6</option>
  52. <option>7</option>
  53. <option>8</option>
  54. <option>9</option>
  55. <option>10</option>
  56. <option>11</option>
  57. <option>12</option>
  58. </select>
  59. <select>
  60. <option>--请选择日期--</option>
  61. <option>1</option>
  62. <option>2</option>
  63. <option>3</option>
  64. <option>4</option>
  65. <option>5</option>
  66. <option>6</option>
  67. <option>7</option>
  68. <option>8</option>
  69. <option>9</option>
  70. <option>10</option>
  71. </select>
  72. </td>
  73. </tr>
  74. <tr>
  75. <td>就读学校</td>
  76. <td><input type="text"></td>
  77. </tr>
  78. <tr>
  79. <td>应聘岗位</td>
  80. <td>
  81. <input type="checkbox" id="1">
  82. <label for="1">前端开发</label>
  83. <input type="checkbox" id="2">
  84. <label for="2">后端开发</label>
  85. <input type="checkbox" id="3">
  86. <label for="3">测试开发</label>
  87. <input type="checkbox" id="4">
  88. <label for="4">运维开发</label>
  89. </td>
  90. </tr>
  91. <tr>
  92. <td>掌握的技能</td>
  93. <td>
  94. <textarea rows="3" cols="30">
  96. </textarea>
  97. </td>
  98. </tr>
  99. <tr>
  100. <td>项目经历</td>
  101. <td>
  102. <textarea rows="3" cols="30">
  104. </textarea>
  105. </td>
  106. </tr>
  107. <tr>
  108. <td></td>
  109. <td>
  110. <input type="radio" id="10">
  111. <label for="10">我已仔细阅读过公司的招聘要求</label>
  112. </td>
  113. </tr>
  114. <tr>
  115. <td></td>
  116. <td><a href="http://www.baidu.com">查看我的状态</a></td>
  117. </tr>
  118. <tr>
  119. <td></td>
  120. <td>
  121. <h3>请应聘者确认</h3>
  122. <ul>
  123. <li>以上信息真实有效</li>
  124. <li>能够尽早去公司实习</li>
  125. <li>能接受公司的加班文化</li>
  126. </ul>
  127. </td>
  128. </tr>
  129. <tr>
  130. <td></td>
  131. <td>
  132. <input type="submit" value="提交">
  133. <input type="reset" value="清空">
  134. </td>
  135. </tr>
  136. </form>
  137. </table>
  138. </body>
  139. </html>

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表