HTML常用标签、认识浏览器
HTML基本语法
标签及属性
- 标签
标签通常由开始标签和结束标签组成，开始标签由<>将标签名括起来，结束标签由</>括起来。
- 属性
属性由属性名和属性值两部分构成，用=连接，属性值用双引号括起来，属性可以有多个，先后顺序不影响其含义。
元素
- 定义
标签与其包含的文本内容共同构成元素。
-
元素关系
元素关系包括父元素、子元素、兄弟元素。 -
空元素
有些元素由于无法嵌套字节点和内容，称为空元素。
例如:img标签构成的元素就是空元素。
基本格式
<html>
<head>...</head>
<body>...</body>
</html>
HTML常用标签
基本文本标记标签
1.段落标签p
格式如下
<p>这是段落标签，我可以将正文文字划分为一个段落，每段结束自动换行。</p>
2.标题标签h
HTML提供六级标题，其标签为h1到h6，默认每级标题都是加粗显示。
格式如下：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
3.段内换行标签br
由p构成的段落，段落结束才换行，如果需要段内换行可以使用换行标签。
格式如下：
<p>在这里<br>换行</p>
4.保留空白字符标签
默认情况下，段落内连续空格和空行会被显示成一个空格，如果需要连续空格，可以使用特殊字符 ，产生空格，常用的特殊字符还包括大于号&It，小于号>。
格式如下：
<p>在这里 空格</p>
pre定义预格式化的文本，按照文本的原始格式显示在页面中，文本中的空格和换行符会被保留。
格式如下：
<pre>在这里预留了 空格和
换行
</pre>
5.强调标签
Strong内的文本常默认粗体显示，em默认斜体显示
格式如下：
<p>
这里是<strong>强调加粗标签</strong><br>
这里是 <em>强调斜体标签</em>
</p>
6.注释标签
格式如下：
<!-- 在此处写注释 -->
<!-- 此刻不显示此段落：
<p>这是一个被注释了的段落。</p>
-->
图片、音频、视频标签
图像
1.图像格式
网页中常见的图片格式有JPG、GIF、PNG，对应图片文件的拓展名分别为.jpg、.gif、.png
2.img标签
格式如下：
<img src="./微信图片_20220407205840.jpg（图片路径）" alt="替换文字">
3.绝对路径和相对路径
相对路径：是以引用文件之网页所在位置为参考基础，而建立出的目录路径。
绝对路径：以Web站点根目录为参考基础的目录路径。
音频
1.音频格式
常见的音频文件格式有OGG、MP3、WAV对应的文件拓展名为.ogg、.mp3、.wav
2.audio标签
格式如下：
<audio src="音频文件" controls="contros" loop="loop"></audio>
视频
1.视频格式
常见的视频文件格式有MP4、WEBM、OGG对应的文件拓展名为.mp4、.webm、.ogg
2.video标签
格式如下：
<video src="视频路径" controls="contros" loop="loop" width="宽度"></video>
width属性设定视频窗口宽度，高度可省略。
超链接标签
1.跳转到内部链接：
当前文档与目标文档在同一站点内
格式如下：
<a href="目标文档位置及全称">文字或图片</a>
2.跳转到外部链接：
当前文档与目标文档不在同一站点内
格式如下：
<a href="URL(网址)">文字或图片</a>
3.跳转到E-mail链接
允许访问者向指定的地址发送邮件
格式如下：
<a href="mailto:电子邮件地址">文字或图片</a>
4.跳转到当前页面的特定位置
创建锚点：
<a name=”锚点名称”>显示内容</a>
链接锚点：
<a href=”#锚点名称”>显示内容</a>
跳转到这里
列表标签
1.无序列表
格式如下：
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
代码结果：
- 列表一
- 列表二
- 列表三
格式如下：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
代码结果：
- 列表文字一
- 列表文字二
- 列表文字三
<dl>
<dt>html</dt>
<dd>超文本标记语言</dd>
<dt>css</dt>
<dd>层叠样式表</dd>
</dl>
代码结果：
-
html
- 超文本标记语言 css
- 层叠样式表
表格标签
基本语法：
<table>
<tr>
<td>文字</td>
...
</tr>
...
</table>
表单标签
1.表单域
<form action="url地址" methood=" 提交方式" name="表单域名称">
各种表单元素控件
</form>
2.单选按钮
<form>
<input type = "radio" name = "sex"/>男
<input type = "radio" name = "sex"/>女
<form>
3.多选按钮
<form>
<input type = "checkbox" name = "city"/>北京
<input type = "checkbox" name = "city"/>上海
<input type = "checkbox" name = "city"/>广州
<input type = "checkbox" name = "city"/>深圳
</form>
4.下拉表单
<form>
<select name="city">
<option value = "a">北京</option>
<option value = "b">上海</option>
<option value = "c">广州</option>
<option value = "b">深圳</option>
</select>
</form>
5.文本域
<form>
<textarea name = "wenzi" style="width: 100px;height: 60px;"></textarea>
</form>
6.按钮
<form>
<button type = "button" name = "1" value = " ">普通按钮</button>
<button type = "reset" name = "3" value = " ">重置按钮</button>
<button type = "submit" name = "4" value = " ">提交按钮</button>
</form>
认识浏览器
浏览器是网页运行的平台，常用的浏览器有IE、火狐、谷歌、Safari和Opera等五大浏览器
__
浏览器内核
浏览器内核可以分成两部分：渲染引擎和JS 引擎。
1.渲染引擎：负责获取网页内容（如HTML、XML、图像、PDF或者其他类型），输出至显示器或者打印机。浏览器内核不同，渲染效果也存在差异。
2.JS引擎：解析Javascript 语言，执行 javascript 语言来实现网页的动态效果。
常见的浏览器内核有四种：Trident（IE/Edge）、Gecko（火狐）、Blink（谷歌/Opera）、Webkit（Safari）。
浏览器组成
- 浏览器的组成
- 人机交互部分（UI）
- 网络请求部分（Socket）
- JavaScript引擎部分
- 渲染引擎部分（渲染HTML、CSS等）
- 数据存储部分（cookie、HTML5中的本地存储LocalStorage、SessionStorage）
浏览器基本功能
浏览器的基本功能就是根据HTML标签的含义，用特殊的效果去显示和控制一对HTML标签之间所引用的文本内容，HTML标签的作用就是告诉浏览器应该如何显示有关的文本。
总结
通过本周的预习，我对html的标签以及属性有了更深刻的了解，在写博客的过程中，也同时在写各种标签的html代码，从而对vs的快捷键使用的更顺利。在写认识浏览器的部分的同时，我了解了浏览器的内核，也对除了平时在使用的ie浏览器外的其他浏览器有了更多的了解。
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
