HTML5【网页结构部分】

最新推荐文章于 2022-09-10 20:22:35 发布

榕树先生

最新推荐文章于 2022-09-10 20:22:35 发布

阅读量361

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/Departuretree/article/details/102555303

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML5【HyperText Markup Language】

HTML(超文本标识语言)用来描述网页的一种语言，该语言是一种标记语言，使用标记标签来描述网页，而不是编程语言，它是制作网页的基础语言，主要用于描述超文本中内容的显示方式。

HTML5最基本的语法是<标记符></标记符>。当浏览器收到HTML文件后，就会解释里面的标记符，然后把标记符相应的功能表达出来。

HTML5文件的基本格式：

<!DOCTYPE html>//声明  必须位于文档中的第一行，该标记告知浏览器文档所使用的HTML规范
<html>//文件开始的标记  说明本浏览器使用的语言
<head lang="en">//文档头部开始的标记  不显示在网页中 用于说明文件标题和整个文件的一些公用属性
通过<style>标记定义CSS样式表    <script>标记定义JavaScript脚本文件
    <meta charset="UTF-8">
    <title></title>//浏览器窗口的标题  若没有显示文件名
</head>//文件头部结束的标记
<body>//文件主体开始的标记
//主题文档内容    显示在浏览器窗口的客户区中
</body>//文件主体结束的标记
</html>//文件结束的标记

传输协议：数据传输中遵守的规则
http:// 浏览器浏览网页的协议超文本传输协议
www.baidu.com 主机名表示文件存在于哪台服务器主机名可以通过IP地址或者域名来表示。
org非盈利
edu教育
gov政府
mil

webstorm中的快捷键：
浏览：Alt+F2
复制上一行：Ctrl+D
测试文本：输入lorem按Tab键
输入多行标签：p*5 按Tab键
注释：Ctrl+Shift+/

常用标签
单标签：

水平线：<hr width="线宽" colot="颜色 size="线粗细"/>
换行：<br/>  图片：<img>  表单：<input>  <meta>   空格：&nbsp/全角状态下空格`

<pre></pre>//预格式化
<em></em>//斜体<i></i>
<b></b>//加粗<strong></strong>
<del><del>//删除线
<big></big>字体放大
<small></small>字体缩小
<sup></sup>上标
<sub></sub>下标

标题：h1——h5 由大至小在一个网页中h1只使用一次
网页超链接：

<a href="链接的目标地址" target="打开的目标窗口"></a>
target:_blank在新窗口打开
	_parent在原窗口打开

定义：所谓超链接，是指从一个网页指向一个目标的链接关系。
超链接是一种对象，他以特殊编码的文本或图形的形式来实现链接。
一般文字上的超链接问蓝色，文字下面有一条横线。当移动鼠标到该超链接上时，鼠标指针就会变成一只手的形状，浏览后文本颜色改变（默认为紫色）

URL(Uniform Resource Locator)：统一资源定位器，就是人们说的网址，它用于指定资源位置。

IP:网络中的计算机之间是通过IP地址区分的，如果希望访问网络中某台计算机中的资源，首先要定位到这台计算机。IP地址是由32位二进制数（即32个0/1代码组成的，不容易记忆。现在计算机一般采用域名的方式来寻址，即在网络上使用一组有意义字符组成的地址代替IP地址来访问网络资源。
URL:由四个部分组成。

http://www/webDesign.com/pages/computer.html
协议        主机名        文件名     文件名

URL类型：
相对URL链接：将自己网页上的某一段文字或某标题链接到同一网站的其他网页上去。
绝对URL路径：URL就是统一资源定位符，简单地将就是网页上的一个站点，网页的完整路径。
书签超链接：同一网页的超链接。

锚记
定义?来指定链接目标
1.跳转到同一个页面的不同位置

<a name="锚记名称"></a>//在跳转位置处添加一个锚记
<a href="#锚记名称">点击内容</a>//创建链接

2.跳转到不同页面的不同位置

<a name="锚记名称"></a>//在跳转位置处添加一个锚记
<a href="文件名#锚记名称">点击内容</a>创建链接
<a href="mailto:电子邮件地址">站长信箱</a>//发送邮件

图片：
网页中的图片格式：GIF JPEG BMP TIFF PNG
除了文本是写在HTML中的，其他都是嵌入式的，HTML只记录了这些文件的路径。
相对路径：在同一个目录下 “…”表示上一级目录 “…/…”表示上一级的上级目录
绝对路径：路径完整不同目录下

<img src="要显示的图片的URL（路径）" alt="定义图形的简短描述
（1.网速不好时 用文字代替图片2.搜索引擎通过alt搜索图片）" 
title="图片标题" >

单位：像素（px）百分比（%） em rem
表格：

<table boder="边框线" cellspacing="边框单元格间距" cellpadding="单元格填充" width="表格宽度">
	<caption>表头</caption>
	<tr>
		<td colspan="数值（单元格左右合并）" rowspan="上下单元格合并">
			<th>标题</th>
		</td>
	</tr>
	<tr align="对齐方式">
		<td>单元格<td>
	</tr>
</table>

列表：
无序列表

<ul type="disc（默认实心圆）square(实心方块)circle(空心圆)">
	<li></li>
</ul>

有序列表

<o type=" " start="' l>
	<li>
	</li>
</ol>
type:1 a A i I start:开始位置

自定义列表

<dl>
	<dt></dt>
	<dd></dd>
</dl>

表单：
表单主要用于收集网页上浏览者的相关信息

<form action="url" method="get/post" enctype="mine">
	<input type="text'/>//文本框
	<input type="password"/>//密码框
	<input type="radio"/>//单选按钮 有相同name属性
	<input type="checkbox"/>//复选框
	<input type="file"/>//文件域 上传头像
	<input type="sunmit"/>//提交
	<input type="reset">//重置
	<input type="button" value="值">
	<button></button>
	<section multiple size="3">	//下拉列表
		<option></option>
		<option selected></option>
	</section>
	<textarea rows="行数" cols="列数"></textarea>//多行文本框
	<fieldset>//表单分组
		<lagend></lagend>
	</fieldset>
</form>
action=url //指定处理提交表单的格式 URL地址或者电子邮件地址
method=get/post//指明提交表单的http
enctype=mime//指明用来把表单提交给服务器时的互联网媒体形式