HTML基础详解(上)

季雨發表於 2021-10-13 17:00:06

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">1、认识WEB</a></li><li><a href="#_label1">2、HTML初识</a></li><li><a href="#_label2">3、HTML常用标签</a></li><li><a href="#_label3">4、表格</a></li><li><a href="#_label4">总结</a></li></ul></div><p class="maodian"><a name="_label0"></a></p><h2>1、认识WEB</h2>
<p><strong>网页 </strong>主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。</p>
<p><strong>浏览器</strong> 是网页显示、运行的平台。</p>
<p><strong>浏览器内核</strong>(排版引擎、解释引擎、渲染引擎)</p>
<blockquote>
<p>负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。</p>
</blockquote>
<table>
<thead>
   <tr>
         <th>浏览器</th>
         <th>内核</th>
         <th>备注</th>
   </tr>
</thead>
<tbody>
   <tr>
         <td>IE</td>
         <td>Trident</td>
         <td>IE、猎豹安全、360极速浏览器、百度浏览器</td>
   </tr>
   <tr>
         <td>firefox</td>
         <td>Gecko</td>
         <td>可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。</td>
   </tr>
   <tr>
         <td>Safari</td>
         <td>webkit</td>
         <td>现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕在厕所里面了。</td>
   </tr>
   <tr>
         <td>chrome</td>
         <td>Chromium/Blink</td>
         <td>在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发</td>
   </tr>
   <tr>
         <td>Opera</td>
         <td>blink</td>
         <td>现在跟随chrome用blink内核。</td>
   </tr>
</tbody>
</table>
<p><strong>Web标准</strong></p>
<p><strong>「构成」👉 结构标准，表现标准和行为标准</strong></p>
<ul>
<li>结构标准用于对网页元素进行整理和分类(HTML)</li>
<li>表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)</li>
<li>行为标准用于对网页模型的定义及交互的编写(JavaScript)</li>
</ul>
<p><strong>「Web标准的优点」👇</strong></p>
<ul>
<li>易于维护：只需更改CSS文件，就可以改变整站的样式</li>
<li>页面响应快：HTML文档体积变小，响应时间短</li>
<li>可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别</li>
<li>设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式</li>
<li>搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名</li>
</ul>
<p class="maodian"><a name="_label1"></a></p><h2>2、HTML初识</h2>
<p><strong>HTML</strong>(Hyper Text Markup Language):超文本标记语言</p>
<p><strong>所谓超文本，有2层含义：</strong></p>
<ul>
<li>因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）</li>
<li>不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。</li>
</ul>
<p><strong>「HTML骨架格式」</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">

<html>

<head>
   
   <title></title>
</head>

<body>
</body>
</html>
</pre>
</div>
<p><strong>团队约定大小写</strong></p>
<p>HTML标签名、类名、标签属性和大部分属性值统一用小写</p>
<p><strong>HTML元素标签分类</strong></p>
<ul>
<li>常规元素(双标签)</li>
<li>空元素(单标签)</li>
</ul>
<div class="jb51code">
<pre class="brush:xhtml;">
常规元素(双标签)
<标签名> 内容 </标签名> 比如<body>我是文字</body>
空元素(单标签)
<标签名 />比如 <br />或<br>
</pre>
</div>
<p><strong>HTML标签关系</strong></p>
<ul>
<li>嵌套关系父子级包含关系</li>
<li>并列关系兄弟级并列关系</li>
<li>如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。</li>
</ul>
<p><strong>文档类型< !DOCTYPE ></strong><br />
</p>
<p>文档类型用来说明你用的XHTML或者HTML是什么版本。告诉浏览器按照HTML5标准解析页面。</p>
<p><strong>页面语言lang</strong><br />
</p>
<p>lang指定该html标签内容所用的语言</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<html lang="en">
en 定义语言为英语 zh-CN定义语言为中文
</pre>
</div>
<p><strong>lang的作用</strong></p>
<p>1.根据根据lang属性来设定不同语言的css样式，或者字体</p>
<p>2.告诉搜索引擎做精确的识别</p>
<p>3.让语法检查程序做语言识别</p>
<p>4.帮助翻译工具做识别</p>
<p>5.帮助网页阅读程序做识别</p>
<p><strong>字符集</strong><br />
</p>
<p>字符集(Character set) 是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。</p>
<ul>
<li>UTF-8是目前最常用的字符集编码方式让</li>
<li>html 文件是以 UTF-8 编码保存的，浏览器根据编码去解码对应的html内容。</li>
</ul>
<div class="jb51code">
<pre class="brush:xhtml;">
<meta charset="UTF-8" />
</pre>
</div>
<p><strong>meta viewport的用法</strong><br />
</p>
<p>通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的，<strong>pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口</strong></p>
<div class="jb51code">
<pre class="brush:cpp;">
meta有两个属性name 和 http-equiv
</pre>
</div>
<p><strong>name属性的取值</strong></p>
<ul>
<li>keywords(关键字) 告诉搜索引擎，该网页的关键字</li>
<li>description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。</li>
<li>viewport(移动端的窗口)</li>
<li>robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引</li>
<li>author(作者)</li>
<li>generator(网页制作软件）</li>
<li>copyright(版权)</li>
</ul>
<p><strong>http-equiv有以下参数</strong><br />
<mark></mark></p>
<p><code>http-equiv</code>相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容</p>
<p><mark></mark><code>content-Type</code><code> </code>设定网页字符集(Html4用法，不推荐)<br />
<mark></mark></p>
<p><code>Expires(期限)</code><code> </code>,可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。<br />
<mark></mark></p>
<p><code>Pragma(cache模式)</code><code>,</code>是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出<br />
<mark></mark></p>
<p><code>Refresh(刷新)</code><code>,</code>自动刷新并指向新页面。<br />
<mark></mark></p>
<p><code>cache-control</code><code>（</code>请求和响应遵循的缓存机制）</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</pre>
</div>
<p><strong>HTML标签的语义化</strong></p>
<ul>
<li>方便代码的阅读和维护，样式丢失的时候能让页面呈现清晰的结构。</li>
<li>有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。</li>
<li>方便其他设备解析，如盲人阅读器根据语义渲染网页</li>
</ul>
<p><strong>「拓展」标签</strong>：规定页面上所有链接的默认 URL 和设置整体链接的打开状态</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<head>
<base href="http://www.baidu.com" target="_blank">
<base target="_self">
</head>
<body>
<a href="">测试</a> 跳转到百度
</body>
</pre>
</div>
<p class="maodian"><a name="_label2"></a></p><h2>3、HTML常用标签</h2>
<p><strong>1. 排版标签</strong>: 主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。</p>
<ul>
<li>标题标签h(h1~h6)</li>
<li>段落标签p,可以把 HTML 文档分割为若干段落</li>
<li>水平线标签hr</li>
<li>换行标签br</li>
<li>div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。</li>
</ul>
<p><strong>2.排版标签</strong></p>
<ul>
<li>b和strong 文字以粗体显示</li>
<li>i和em 文字以斜体显示</li>
<li>s和del` 文字以加删除线显示</li>
<li>u和ins 文字以加下划线显示</li>
</ul>
<p><strong>3. 标签属性(行内式)</strong><br />
</p>
<p>使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。</p>
<pre>
<标签名属性1="属性值1" 属性2="属性值2" …> 内容 </标签名><手机颜色="红色" 大小="5寸"></手机></pre>
<p><strong>4. 图像标签img</strong><br />
</p>
<p style="text-align: center"><img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202110/2021101315394627.png" /><br />
</p>
<p><strong>注意：</strong></p>
<ul>
<li>标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。</li>
<li>属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。</li>
<li>采取键值对的格式 key=“value” 的格式</li>
</ul>
<div class="jb51code">
<pre class="brush:xhtml;">
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" />
</pre>
</div>
<p><strong>5. 链接标签(重点)</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target="_self"默认窗口弹出方式
target="_blank" 新窗口弹出
</pre>
</div>
<table>
<thead>
   <tr>
         <th>属性</th>
         <th>作用</th>
   </tr>
</thead>
<tbody>
   <tr>
         <td>href</td>
         <td>用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能</td>
   </tr>
   <tr>
         <td>target</td>
         <td>用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。</td>
   </tr>
</tbody>
</table>
<p><strong>src 和 href 的区别</strong></p>
<p>一句话概括:src 是引入资源的 href 是跳转url的</p>
<p>1.src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。</p>
<p>2.src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。</p>
<p>3.href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。</p>
<p><strong>注意：</strong></p>
<p>1.外部链接需要添加 http:// www.baidu.com</p>
<p>2.内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页</p>
<p>3.果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。</p>
<p>4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。</p>
<p><strong>锚点定位</strong>：通过创建锚点链接，用户能够快速定位到目标内容。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的）
<a href="#two">
</pre>
</div>
<p><strong>6. 注释标签</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">

快捷键是： ctrl + /
或者 ctrl +shift + /
</pre>
</div>
<p>团队约定：注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行</p>
<p><strong>7. 路径</strong><br />
</p>
<p style="text-align: center"><img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202110/2021101315394628.jpg" /><br />
</p>
<p><strong>8. 其他知识</strong></p>
<p><mark></mark><strong>预格式化文本pre</strong><strong> </strong>标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。格式化文本就是，按照我们预先写好的文字格式来显示页面，保留空格和换行等。</p>
<p><strong>特殊字符</strong><br />
</p>
<p style="text-align: center"><img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202110/2021101315394629.jpg" /><br />
</p>
<p><strong>什么是XHTML</strong></p>
<ul>
<li>XHTML 指「可扩展超文本标签语言」（EXtensible HyperText Markup Language）。</li>
<li>XHTML 的目标是取代 HTML。</li>
<li>XHTML 与 HTML 4.01 几乎是相同的。</li>
<li>XHTML 是更严格更纯净的 HTML 版本。</li>
<li>XHTML 是作为一种 XML 应用被重新定义的 HTML,是严格版本的HTML。例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。</li>
<li>XHTML 是一个 W3C 标准。</li>
</ul>
<p><strong>写HTML代码时应注意什么？</strong></p>
<ul>
<li>尽可能少的使用无语义的标签div和span；</li>
<li>在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；</li>
<li>不要使用纯样式标签，如：b、font、u等，改用css设置。</li>
<li>需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；</li>
<li>使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；</li>
<li>表单域要用fieldset标签包起来，并用legend标签说明表单的用途；</li>
<li>每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for来让说明文本和相对应的input关联起来。</li>
</ul>
<p class="maodian"><a name="_label3"></a></p><h2>4、表格</h2>
<p>现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。</p>
<p><strong>创建表格</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
</pre>
</div>
<p><strong>table、tr、td，他们是创建表格的基本标签，缺一不可</strong></p>
<ul>
<li>table用于定义一个表格标签。</li>
<li>tr标签用于定义表格中的行，必须嵌套在 table标签中。</li>
<li>td 用于定义表格中的单元格，必须嵌套在标签中。</li>
<li>字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。</li>
</ul>
<p style="text-align: center"><img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202110/2021101315394630.png" /><br />
</p>
<p>表头单元格标签th:一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签替代相应的单元格标签即可。<br />
</p>
<p style="text-align: center"><img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202110/2021101315394631.png" /><br />
</p>
<p><strong>表格标题caption</strong>通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在表格里面才有意义。你是风儿我是沙</p>
<div class="jb51code">
<pre class="brush:js;">
<table>
<caption>我是表格标题</caption>
</table>
</pre>
</div>
<p><strong>表格属性</strong><br />
</p>
<p style="text-align: center"><img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202110/2021101315394732.jpg" /><br />
</p>
<p>三参为0，平时开发的我们这三个参数<code> border cellpadding cellspacing</code> 为 0</p>
<p>合并单元格,合并的顺序我们按照 <code>先上</code> <code>后下</code> <code>先左</code> <code>后右</code> 的顺序 ,合并完之后需要删除多余的单元格。</p>
<ul>
<li>跨行合并：rowspan=“合并单元格的个数”</li>
<li>跨列合并：colspan=“合并单元格的个数”</li>
</ul>
<p><strong>总结表格</strong></p>
<table>
<thead>
   <tr>
         <th>标签名</th>
         <th>定义</th>
         <th>说明</th>
   </tr>
</thead>
<tbody>
   <tr>
         <td>< table></ table></td>
         <td>表格标签</td>
         <td>就是一个四方的盒子</td>
   </tr>
   <tr>
         <td>< tr></ tr></td>
         <td>表格行标签</td>
         <td>行标签要再table标签内部才有意义</td>
   </tr>
   <tr>
         <td>< td></ td></td>
         <td>单元格标签</td>
         <td>单元格标签是个容器级元素，可以放任何东西</td>
   </tr>
   <tr>
         <td>< th></ th></td>
         <td>表头单元格标签</td>
         <td>它还是一个单元格，但是里面的文字会居中且加粗</td>
   </tr>
   <tr>
         <td>< caption></ caption></td>
         <td>表格标题标签</td>
         <td>表格的标题，跟着表格一起走，和表格居中对齐</td>
   </tr>
   <tr>
         <td>clospan 和 rowspan</td>
         <td>合并属性</td>
         <td>用来合并单元格的</td>
   </tr>
</tbody>
</table>
<p><strong>表格划分结构<br />
</strong></p>
<p>对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注，这样更好的分清表格结构。</p>
<p><strong>注意：</strong></p>
<ul>
<li>< thead></ thead>：用于定义表格的头部。用来放标题之类的东西。内部必须拥有标签！</li>
<li>< tbody></ tbody>：用于定义表格的主体。放数据本体。</li>
<li>< tfoot></ tfoot>放表格的脚注之类。</li>
<li>以上标签都是放到table标签中。</li>
</ul>
<p class="maodian"><a name="_label4"></a></p><h2>总结</h2>
<p>本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注琼殿技术社区的更多内容！</p>

頁: [1]

琼殿技术论坛's Archiver

HTML基础详解(上)