时间：2023-07-25 21:18:02 | 来源：网站运营
时间：2023-07-25 21:18:02 来源：网站运营
前端三剑客：第2章（HTML）：
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body></html>1、<!DOCTYPE html>告诉浏览器使用什么样的html或者xhtml来解析html文档
2、<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个HTML文档，在它们之间是文档的头部<head>和主体<body>。
3、元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
4、<title></title>定义网页标题，在浏览器标题栏显示。
5、<body></body>之间的文本是可见的网页主体内容
6、<meta charset="UTF-8">声明编码方式用utf8
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名><标签名 属性1=“属性值1” 属性2=“属性值2”…… />1、HTML标签是由尖括号包围的特定关键词在很早以前HTML4的时候，HTML的标签是大写的，但在后面的发展中，人们发现HTML仍然存在很多不足，标签不区分大小写和标签可以胡乱嵌套都在其中，于是1998 年语法更为完的XML（ The Extensible Markup Lanxguage 可扩展标记语言 ）成为推荐标准，意在替代HTML。和HTML一样，XML同样来源于SGML，但当时已有成千上万的站点，因此直接使用XML作为网页开发技术根本就不可能。因此，后面W3C就在HTML4.0的基础上，参照XML的语法规则对HTML进行扩展，形成了XHTML （ The Extensible HyperText Markup Language ，可扩展超文本标记语言 ）的1.0版本。
2、标签分为闭合和自闭合两种标签
3、HTML不区分大小写
4、标签可以有若干个属性,也可以不带属性,比如就不带任何属性
5、标签可以嵌套,但是不可以交叉嵌套
<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><p>大家好，我是段落1。</p><p>大家好，我是段落2。</p><p>大家好，我是段落3。</p><p>大家好，我是段落标签p。我按了enter一下换行了</p><p>大家好，我是段落标签p。我按了enter一下<br/> 换行了</p><b>定义粗体文本</b><br /><strong>定义粗体文本方式2</strong><br /><em>定义斜体字</em><br /><i>定义斜体字方式2</i><br /><del>定义删除文本</del><br />® ©标签大致可分为两类
<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现块级元素与行内元素的区别所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。1、href是超链接最重要的属性，规定了用户点击链接以后的跳转目标，这个目标可以是 网络连接，也可以是本地连接。
2、网络链接指的是依靠网络来进行关联的地址，一般在地址前面是以 http://或者https://这样开头的，如果没有网络，则用户点击了超链接也无法访问对应的目标。
3、本地链接指的是本地计算机的地址，一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的，不需要经过网络。
4、如果href的值留空，则默认是跳转到当前页面，也就是刷新当前页面。
<!DOCTYPE HTML><html lang="en-US"> <head> <title>锚点的使用</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <div id="i1"> <p>第一章内容</p> </div> <div id="i2"> <p>第二章内容</p> </div> <div id="i3"> <p> 第三章内容</p> </div> </body></html> /*src属性： 指定图像的URL地址，是英文source的简写，表示引入资源。 src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。 如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。alt属性：指定图像无法显示时的替换文本。当图像显示错误时，在图像位置上显示alt的值。如上所示，就是谷歌浏览器中，引入图像失败后，显示了替换文本。alt属性一般 作为SEO优化的手段之一，所以，使用了img标签就需要加上alt属性。width属性： 指定引入图片的显示宽度。height属性：指定引入图片的显示高度。border属性：指定引入图片的边框宽度，默认为0。title属性：悬浮图片上的提示文字*/点击图片跳转可以配合a标签使用<a><img src="" alt=""></a> <ul type="square"> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <ol start="100"> <li>item1</li> <li>item2</li> <li>item3</li> </ol><table border="1"> <tr> <td>单元格的内容</td> …… </tr> ……</table>1、table属性<table>和</table>表示一个表格的开始和结束。一组<table>...</table>表示一个表格。
2、border用于设置整个表格的边框宽度，默认为0，表示不显示边框。
3、<tr>和</tr>表示表格中的一行的开始和结束。一组<tr>...</tr>，一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。
4、<td>和</td>表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了。
<h3>用户注册</h3> <form action="http://127.0.0.1:8800" method="get"> <p><label for="user">姓名</label>： <input type="text" name="user" id="user"></p> <p>密码： <input type="password" name="pwd"></p> <p>爱好： <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="shuangseqiu" checked>双色球 </p> <p>性别： <input type="radio" name="gender" value="men">男 <input type="radio" name="gender" value="female">女 <input type="radio" name="gender" value="qita">其他 </p> <p>生日：<input type="date" name="birth"></p> <p>籍贯： <select name="province" id="" multiple size="2"> <option value="">浙江省</option> <option value="" selected>浙江省</option> <option value="">浙江省</option> </select> </p> <p> <textarea name="" id="" cols="30" rows="10" placeholder="个人简介"></textarea> </p> <div> <p><input type="reset" value="重置"></p> <p><input type="button" value="普通按钮"></p> <p><button>普通按钮</button></p> <p><input type="submit" value="提交"></p> </div> </form>关键词：
