HTML 学习_html学习博客-CSDN博客

本文链接：https://blog.csdn.net/qq_40054352/article/details/88541093

HTML基础

1. 基本结构

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=“zh-CN”’,不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。

2. 文档类型

目前常用的两种文档类型是xhtml 1.0和html5
xhtml快捷键：html:xt + tab (需安装Emmet插件)
html快捷键: html:5 + tab 或者 ! + tab
两者区别：
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性

3. 文档规范

xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。

1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)

1、em标签 行内元素，表示语气中的强调词 (变成斜体)
2、i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇 (变成斜体)
3、b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名 (加粗)
4、strong标签 行内元素，表示非常重要的内容 (加粗)

8. 语义化的标签

语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

9. 绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

绝对地址：相对于磁盘的位置去定位文件的地址
相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

10. 链接

图片链接 <img src="images/pic.jpg" alt="产品图片" />
<a>标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。

<a href="#">新闻标题1</a> <!--  # 表示链接到页面顶部   -->
<a href="javascript:;">缺省值</a> <!--  # 表示啥也不干   -->
<a href="http://www.baidu.com" title="跳转到百度">百度</a>
<a href=""http://www.baidu.com" title="跳转到百度"><img src=""images/logo.png alt="logo"></a>
<a href="2.html">测试页面2</a>
<a href ="http://www.baidu.com" title="到百度" target ="_blank">百度</a><!--  # 新开一个窗口打开百度   -->

11. 定义页面内滚动跳转

页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。

<a href="#mao1">标题一</a>
......
<h3 id="mao1">跳转到的标题</h3>

12. 列表

有序列表
```
<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>
```
无序列表
```
<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>
```
定义列表

	定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：
```
<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>
```

13. 表格

常用标签
	
	1、table标签：声明一个表格
	2、tr标签：定义表格中的一行
	3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

常用属性

	1、border 定义表格的边框(1为显示)
	2、cellpadding 定义单元格内内容与边框的距离			
	3、cellspacing 定义单元格与单元格之间的距离			
	4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right			
	5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom			
	6、colspan 设置单元格水平合并			
	7、rowspan 设置单元格垂直合并

表格常用样式属性
border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格

14. 传统布局

1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
2、单元格里面嵌套表格			
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式	
4、通过属性或者css样式设置单元格中元素的样式

15. 表单

首先应该用标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入

<!-- form定义一个表单区域,action属性定义表单数据提交的地址，
method属性定义提交的方式。   -->
<form action="http://www..." method="get">
		
<!-- label标签定义表单控件的文字标注，input类型为text定义了
一个单行文本输入框  -->
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
		
<!-- input类型为password定义了一个密码输入框  -->
<p>
<label>密码：</label><input type="password" name="password" />
</p>
		
<!-- input类型为radio定义了单选框  -->
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
		
<!-- input类型为checkbox定义了单选框  -->
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
		
<!-- input类型为file定义上传照片或文件等资源  -->
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
		
<!-- textarea定义多行文本输入  -->
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
		
<!-- select定义下拉列表选择  -->
<p>
<label>籍贯：</label>
<select name="site">
		  <option value="0">北京</option>
		  <option value="1">上海</option>
		  <option value="2">广州</option>
		  <option value="3">深圳</option>
</select>
</p>
		
<!-- input类型为submit定义提交按钮  
		   还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
		   <input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">
		
<!-- input类型为reset定义重置按钮  -->
<input type="reset" name="" value="重置">
</p>
		
</form>

16. 内嵌框架

<iframe>标签会创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条，代码如下：

	<a href="http://www.baidu.com" target="myframe">百度</a>
	<iframe src="http://www.baidu.com" width="900 height="600" frameborder="0" scrolling="no" name="myframe"></iframe>
	<a href="01.html" target="myframe">页面一</a>
	<a href="02.html" target="myframe">页面二</a>
	<a href="03.html" target="myframe">页面三</a>
	<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>