tags: ‘HTML’
categories: “HTML”
HTML的骨架
<!DOCTYPE html>// 这句话叫DTD（Document Type Definition），全称文档类型声明。网页将来是给浏览器去执行的。设置文档的类型是html，这是一个网页类型，告诉浏览器不要将这个网页当作其他类型来看。告诉浏览器，网页的当前文档是html文档。这就是上面那句话的含义<html lang="en">// lang="en"：设置使用的语言是英语，body标签中可以写英文。body的标签中写中文也是可以的，也可以写其他语言// lang的语言设置是可以更改的，如果更改为其他的语言，则谷歌浏览器会询问是否需要翻译。// 因为body中写的是中文的，所以一般情况下会将lang设置为zh-CN// 不将en改成中文也可以，因为浏览器默认支持中文的，但是为了考虑以后的兼容性或系统的兼容性问题的话，需要将lang中的en改为zh-CN，zh是中，CN是chine，其实就是中文的意思// html是根标签，根标签之间是html代码</html><html><head>// meta标签是设置一些信息的// 设置字符集是UTF-8，因为网页中要写很多的语言，语言采用的编码是UTF-8，这个编码是世界上大部分国家的语言它都包含，所以一般情况下这个是不更改的// 一般情况下：如果做的是国际性的网站时使用UTF-8；如果做的网站时只有国内使用的话，可以将编码改成gb312这种编码格式// 小写大写都认识<meta charset="UTF-8">// 这个网页标题的设置<title>Do</title>// head的内容在网页中是看不到的，对网页做设置的// body才是网页真正显示的内容// 一般写代码时在head中设置好之后，在body中写各种标签</head><body></body></html>
HTML4的标记
HTML的标记的分类
1.双标签（大部分标签都是双标签）
：这是最大的根标签，网页都是写在这里中的
双标签的格式是：<标签名>内容(文字内容或其他内容)</标签名>
双标记一定要有结束
2.单标签
标签是单标记
标题标签
描述：在网页中表达标题的含义，比如说一级标题，二级标题；它给文字赋予几级标题的含义（语义化）
语义化：大部分标签都是有特定的含义的
用法：页面当中一级标题只允许出现一次，一般是将最最重要的定义为一级标题。例如腾讯的首页是公司的logo为一级标题，其他的是三级或二级标题
语法：
文件：02.25/2h1-h6.html<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
划线标签
描述：在网页中表示画一条线
用法：页面当中一级标题只允许出现一次，一般是将最最重要的定义为一级标题。例如腾讯的首页是公司的logo为一级标题，其他的是三级或二级标题
语法：
文件：02.25/3hr.html<h1>标题</h1><hr /> // (一般标题和正文之间是有横线的) 这个是单标记，单标记的结束的是在>后面加上/<p>正文部分</p>
段落标签
描述：在网页中表达段落的含义；它给文字赋予段落的含义（语义化）
用法：比如写一篇文章，这篇文章分三段
语法：
文件：02.25/4p.html<p>第一段文字</p><p>第二段文字</p><p>第三段文字</p>
换行标签
描述：在网页中表达换行的含义
用法：比如写一篇文章，这篇文章分三段
语法：
文件：02.25/4p.html<p>第一段<br />文字</p>
div标签
描述：在网页中表达盒子的含义（没有语义）
用法：任意地方可以使用，一般大的范围使用div来包裹，局部的小范围使用span来包裹
显示：每个div独占一行
语法：
文件：02.25/5div&span.html<div>内容</div>
span标签
描述：在网页中表示某一块小区域，span是占有一小部分
用法：任意地方可以使用，一般大的范围使用div来包裹，局部的小范围使用span来包裹
显示：每个span是占有一小部分
语法：
文件：02.25/5div&span.html<span>111</span><span>222</span>
strong标签和b标签
// b的作用是从外观上给文字加粗，还有一个strong标签和b相似，它也是加粗的。从外观上和b是一样的，但是strong它主要是强调的意思
// strong和b的区别是：他们的外观是一样的，都是加粗，但是strong是有语义的，b是没有语义的。b是从外观上加粗，strong是给内容强调，它通过外观强调。并且strong的权重也比较高
用法：任意地方可以使用
语法：
文件：02.25/6strong.html<p>kklfndgjkdsf<b>12</b><strong>12</strong></p>
em标签和i标签
// i和em表示让文字倾斜，也是和上面一样的。i是单纯的让文字倾斜。em是有语义的，i是没有语义的。有语义的是起强调的意思
用法：任意地方可以使用
语法：
文件：02.25/6strong.htmlkklfndgjkdsf<i>12</i><em>12</em>
del标签和s标签
// s和del是表示删除线（一般是打折的时候会看到）。s是没有语义的，del是有语义的。在使用的时候如果是注重语义化则使用del。有语义的是起强调的意思
用法：任意地方可以使用
语法：
文件：02.25/6strong.htmlkklfndgjkdsf<s>12</s><del>12</del>
ins标签和u标签
// u和ins是表示下划线,u表示underline的意思。u和ins的外观是一样的，u是没有语义的，ins是有语义的。有语义的是起强调的意思
用法：任意地方可以使用
语法：
文件：02.25/6strong.htmlkklfndgjkdsf<u>12</u><ins>12</ins>
img标签
文件：02.25/7img.html
语法：
<标签名 属性名=属性值 属性名=属性值>
// 属性值一般是放置双引号中的（这是好的规范，有的是单引号有的没加，这是不好规范）。多个属性中间用空格隔开，这个空格的个数随便，一个即可，空格只是做一个分割的作用。src是指定图片的路径的
路径分两大类，一个是相对路径，一个是绝对路径，大部分情况下都是使用的是相对路径。什么是绝对路径：绝对路径就是带盘符的例如<img src="c/test.1.png">绝对路径尽量少用，因为文件的位置可能更改，一旦文件的位置更改之后，则文件不可使用。相对路径：文件的相对路径不会错的，文件可以随意移动有的时候绝对路径也是使用的绝对路径：带盘符或者网址等，一般少用// 多用相对路径，相对路径一般不会出什么问题绝对路径：带盘符或者网址等相对路径 1 资源和当前文件在同一个目录 直接写文件名2 资源所在目录和当前文件在同一个文件夹下此时 资源所在目录/资源3 当前文件的所在目录与资源所在目录在同一目录下此时 ../资源目录/资源
案例：
// src可以写相对路径，相对路径是相对自己的文件，需要从网页中加载图片。如果html文件和img图片是在同级目录下面，则src是./文件名.扩展名，.表示当前目录，// src中的文件名需要加上扩展名，文件的扩展名是什么就要写什么扩展名// 如果只有文件名称，默认会从当前目录查找。所以./加上不加上都一样<img src="./tim.jpeg" alt="" />// 一个点是当前目录，两个点是上级目录<img src="../tim.jpeg" alt="" />
alt属性
alt属性叫替换文本，如果图片加载不出来，就显示alt。它是给看网页的人的友好的提示
title属性
title属性：是叫悬停文本：鼠标放在图片上显示的文字
// 一般title是写这个图片是做什么的
width和height属性
如果图片比较大时可以设置图片的宽高的 ，使用width和height来设置，任何属性书写的顺序都是随意的，宽高时像素为单位的，只需要写数字
a标签
文件：02.25/8a.html
a标签：就是超链接标签
href属性
// a标签是双标记，href的值是跳转的网址，这是基本的超链接<a href="http://www.baidu.com">百度</a>// href可以写网址也可以写资源，资源可以写相对路径。即href可以写相对路径和绝对路径<a href="7img.html">资源文件</a>
title属性
title属性:鼠标放上去显示文字
target属性
target属性：设置目标打开方式
// _blank表示将使用新窗口打开链接即跳转的地址使用新窗口打开<a href="www.baidu.com" title="baidu" target="_blank">baidu</a>有的时候，点一个链接，不想让它跳转，可以使用空链接，将href设置为#// 空链接<a href="#">文本</a>
使用
// 图片链接：点击图片进行跳转：图片链接就是将图片标签在外面包裹一个a<a href="www.baidu.com"><img src="图片地址" alt=""></a>//href中可以写地址，也可以写资源文件，路径可以写相对的也可以写绝对的。这个和img标签中的src是类似的
base标签
文件：02.25/8a.html
// 超链接很多时候是在新窗口打开，如果是在新窗口打开，那么每个超链接都要设置target属性的，这是比较麻烦的，那么可以在head中配置一个整个页面超链接的共有的属性，<base>,翻译过来就是基本的基础的。<base target="_blank">// 设置页面中所有的超链接都在新窗口打开// 不写超链接的target属性，那么target属性是从base中继承的// 设置target的属性的就按照设置的target属性
pre标签
文件：02.25/9pre.html
pre标签是一个预格式化标签
// 如果html中有多个空格，或者换行，则在浏览器中只将它作为一个空格在网页中展示
// 如果使用pre标签将内容嵌套，则告诉浏览器以页面中本身的内容样式显示，不会将多个空格或者换行在网页中变成一个空格
<pre>锄禾日当午汗滴 禾下土谁知盘中餐粒粒皆辛苦</pre><h1></h1>©®<p>汗滴 禾下土</p>3×5=15
字符实体
文件：02.25/9pre.html
所有的标签是不会显示在网页中的，标签只是给内容赋予一定的含义或者给内容修饰，或者给内容加一些语义化的。
如果想在网页中显示一些标签怎么办。例如要将
这个时候就需要使用特殊字符了。如果直接在文件中写浏览器会将它当作标签来解析，当成标题来处理，所以可以将尖括号换成特殊的字符。
< //表示<> //表示><h1></h1> // 这个时候浏览器就不会将这句话当成标签解析了©：这个是版权®：这个是商标 ：这是表示一个空格×：表示乘法符号3×5=15 // 展示
锚点
文件：02.25/10alink.html
文件：02.25/11alink2.html
锚点：当页面内容比较多时，利用锚点可以快速定位到某个位置
语法：
<p><!-- 下面的a是锚点，锚点名字方便跳转 --><!-- 下面设置标记 --><a name="third"></a>第三集圣诞节是基督教世界最大的节日。</p><!-- 超链接：#是空链接，会默认刷新页面；因为页面是从上向下加载的，所以回到顶部显示 --><a href="#">返回顶部</a><!-- 最简单的返回顶部，还有其他的方式返回顶部 --><!-- 快速定位到某个位置 a标签的href和锚点的名字要相同 --><a href="#third">跳到第三集</a><!-- 锚点可以支持跨页面 --><!-- 不写target是在当前页面打开 --><a href="10alink.html#forth">跳转到10alink页面的第四集</a>
列表
文件：02.25/14ul.html
在html中的列表分为三种：无序列表，有序列表，自定义列表
ul标签-无序列表
语法：
<!--unordered list --><!-- ul中一定要有li，内容一定要在li中写 --><!-- 使用场景：当有很多项，没有先后顺序，而且都是反映一个主题时就可以使用无序列表 --><ul><li>1.广东</li><!-- li =》 list item --><li>2.江苏</li><li>3.浙江</li></ul>
ol标签-有序列表
语法：
<!--ol 有序列表--><ol><li>广东</li><li>江苏</li><li>浙江</li></ol><!-- 实际工作中ul用的最多，一般有序列表也会使用ul --><!-- 项目中ol、ul都可以，尽量选有语义化的。有语义便于搜索引擎优化 -->
自定义列表
语法：
<!-- 自定义列表 --><!-- difinition list --><dl><!-- 自定义标题 t：title --><dt>支付方式</dt><!-- 自定义描述 d：discription --><!-- dd是描述dt的， dl是分割；一个dt可以有多个dd；一个dl可以有多个dt和dd --><dd>货到付款</dd><dd>在线支付</dd><dd>分期付款</dd><dd>公司转账</dd><dt>配送方式</dt><dd>上门提取</dd><dd>211限时达</dd></dl>
table标签
文件：02.25/15table.html
语法：
<!-- 表格 1 布局 2 展示数据--><!-- 表格是默认没有边框和边界线的，使用一些属性来添加 --><!-- border=1：设置1像素边框，border是给整个表格甚至是每个单元格都加上边框，默认单元格和单元格之间是有个间隙的。 --><!-- cellspacing=0：cell表示单元细胞的意思，单元格之间默认是有间隙，设置单元格之间的间隙设置为0 --><!-- align=center：让整个表格水平居中；调整表格的对齐方式，默认居左对齐，可以调整居右right和居中center对齐 --><!-- width、height：设置表格的宽高，单位是像素 --><!-- cellpadding=5：调整文字和单元格之间的间隙为5像素（调整文字在单元格之间的偏移量，右边距可以使用css来写） --><table border="1" cellspacing="0" align="center" width="500" height="300" cellpadding="25"><!--定义行 table row--><tr><!--定义列--><td>1.1</td><td>1.2</td><td>1.3</td></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.3</td></tr></table>
caption标签
文件：02.25/16table_demo2.html
<!-- 表格 1 布局 2 展示数据--><table border="1" cellspacing="0" align="center" width="500" height="300" cellpadding="25"><!-- 定义表格标题 -- 自动在表格内部居中 --><caption>员工信息表</caption><!--定义行--><tr><!--table head th设置表头--><!-- 用法和td一样只不过样式不一样 --><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><!--定义列--><td>刘伟</td><td>男</td><td>33</td></tr><tr><!--定义列--><td>张娜</td><td>女</td><td>23</td></tr></table>
合并单元格
文件：02.25/16table_demo2.html
<table border="1" cellspacing="0" align="center" width="500" height="300" cellpadding="25"><caption>个人简历</caption><tr><td>阿龙</td><td>男</td><td>33</td><!-- 合并单元格 --横跨两行 --><td rowspan="2">照片</td></tr><tr><td>身高175</td><td>汉族</td><td>已婚</td></tr><tr><td>自我评价</td><!-- 合并单元格 -- 横跨3列 --><td colspan="3"></td></tr></table>
表格头和表格体和表格尾
<!-- 表格结构分为3块：表格头，表格体，表格尾 --><!-- 没有指定具体结构时，浏览器会将表格所有的内容都当成表格体 --><!-- 表格 1 布局 2 展示数据--><table border="1" cellspacing="0" align="center" width="500" height="300" cellpadding="25"><caption>员工信息表</caption><!-- 表格头部 table head：一般是标题 --><thead><tr><!--th设置表头--><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><!-- 表格体 table body --><tbody><tr><!--定义列--><td>刘伟</td><td>男</td><td>33</td></tr><tr><!--定义列--><td>张娜</td><td>女</td><td>23</td></tr></tbody><!-- 表格尾部 一般是汇总信息 --><tfoot><tr><td>公司名称</td><td colspan="2">TMD</td></tr></tfoot><!-- 分清结构便于浏览器解析 --></table>
form表单标签
文件：02.25/17form.html
表单是使用form标签
表单：登录或注册的页面，是用于收集用户信息的
form属性
<!-- submit是有提交功能的提交到那里去，可以通过form的属性 --><!--<form action="url" method="get"></form>action的值指定表单提交到哪里去，一般是后台服务器的地址method：表示表单提交方式，常见是get、post，不写值默认是getaction属性指定表单提交给什么程序处理method属性指定表单提交方式 一般是get/post-->
input—text
<form><!-- input单标签 类型：text文本框 --><!-- 属性：value属性是给下面表单元素设置默认值的 --><!-- h5的进阶阶段提示用户输入使用placeholder属性 --><p>用户名：<input type="text" /></p></form>
input—password
<form><!-- input单标签 类型：password密码框 --><!-- 属性：value属性是给下面表单元素设置默认值的 --><p>密码： <input type="password" /></p></form>
input—radio
<!-- input单标签 类型：radio单选按钮，单选按钮需要加name，name值一样的情况下是表示只能选一个；checked表示默认选中 --><!-- 如果不设置相同的name值，或者不设置name的话会导致两个按钮都可以一起被选中 -->性别：<input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女
input—checkbox
<!-- input单标签 类型：checkbox复选框 --><!-- name是需要的如果需要使用表单提交到后台就要设置name的值 --><!-- checked表示默认选中 --><!-- checked可以简写；如果值和名字一样可以简写，例如checked="checked" -->爱好<input type="checkbox" name="hobbies">运动<input type="checkbox" name="hobbies" checked>编程<input type="checkbox" name="hobbies">旅游<input type="checkbox" name="hobbies">交友
input—file
<!-- input单标签 类型：file文件选择框 --><!-- 属性：value属性是给下面表单元素设置默认值的 -->头像<input type="file" name="file" />
input—hidden
<!-- type还有一个类型是hide，隐藏表单元素，（通过隐藏表单元素携带数据到后台）--><input type="hidden">
textarea标签
<style>textarea {/* 设置文本域不可拖拽 */resize: none;}</style><!-- textarea：表示文本域 --><!-- 写表单的时候每一个都要name，如果使用form表单提交数据到后台时，后台是通过name的值来获取数据的；如果不设置，后台拿不到这条数据 --><!-- rows表示行，cols表示列 --><!-- textarea的默认值是写在标签中间的 -->个人留言<textarea name="user_content" cols="20" rows="8"></textarea>
select标签
文件：02.27/17form.html
<!-- 表单中的下拉列表叫select --><select><!-- value的值就是选中的值，表单提交，提交的值是value的值 --><!-- selected表示当前选项默认选中。selected=selected因为属性和值相等可以简写为selected --><option value="">--请选择省份--</option><option value="jingsu" selected>江苏省</option><option value="hunan">湖南省</option><option value="guangdong">广东省</option></select><!-- 上面的代码默认只能选一个选项，如果想要多选的话，可以加上属性 --><!-- multiple属性表示下拉选择框可以多选。属性名和属性值一样的情况下，可以只写一个单词即可，有兼容问题，但是一般情况下都是兼容的 --><!-- size属性设置默认展示几项 --><select multiple size="2"><option value="">--请选择学习课程--</option><option value="en">英语</option><option value="xinli">心理学</option><option value="caiwu">财务管理</option></select>
按钮
<!-- 按钮：value是按钮的文字 --><!-- type="button"：普通按钮 --><!-- 作用：取决于js的代码给表单添加了什么事件 --><input type="button" value="普通按钮" id="btn" /><!-- type="reset"表示重置按钮，value默认有值，但是也是可以更改value的值的 --><!-- 作用：将之前的值恢复到默认值 --><input type="reset" /><!-- type="submit"：提交按钮；提交按钮也有默认的value的值，value值可以被更改 --><!-- 作用：将表单选择的值提交到服务器 --><!-- 如果想要将表单填写的数据提交到服务器，那么表单元素是需要有name属性的；name是唯一标识表单元素的，他还有一个作用是表单提交需要name --><input type="submit" value="注册" /><!--图片提交按钮--><!-- src是图片的路径 --><input type="image" src="images/btn.png" /><!-- type是image和type是submit本质上是没有区别的，只是外观不一样，都表示提交，都有提交的默认事件 -->
lable标签
文件：02.25/18label标签.html
lable标签严格意义来说，它不属于表单的标签，但是一般和表单的元素配合使用，作用将文字和表单元素进行关联
<form><!-- 点文字也可以选中文本域 --><!-- lable实现了上面的功能，将文字和文本域关联起来 --><label>用户名：<input type="text" name="username"></label><label for="pwd">密码：</label><input type="password" name="pwd" id="pwd"><!-- lable上面有两种用法，for的值是需要关联的表单元素的id值 --><!-- 一般情况上面两种都可以，但是有的低版本浏览器只识别下面的这种 --></form>
乱码原因
// 乱码：文件默认保存方式和打开文件的方式不一样，会导致乱码
若有收获，就点个赞吧
0 人点赞
