前端自学学习笔记——HTML
1、骨架标签
<html></html>根标签，html最大标签
<head></head>文档的头部，此标签中必须设置title标签
<title></title>文档的标题
<body></body>文档的主体，网页的基本内容在其中
在vscode中骨架结构生成快捷键：！+ Tab键
<!DOCTYPE>文档类型声明，告知浏览器使用哪种HTML版本显示页面
<!DOCTYPE html>表示当前页面使用html5版本显示页面
<html lang="en">表示当前文档采用英文，但也可以显示中文
lang用来定义当前文档显示语言，en表示英文，zh-CN表示中文，该属性对浏览器的搜索引擎有一定作用
<meta charset="utf-8">表示当前规定HTML页面使用的字符编码
charset属性常用值有：GB2312(简体中文)、BIG5(繁体中文)、GBK(包含简体中文和繁体中文)、UTF-8(万国码，基本包含所有国家使用的字符)
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=1">视口标签
属性含义：width设置视口的宽度，device-width表示设备的宽度
initial-scale初始缩放比，默认1.0
maximum-scale最大缩放比，数值为一个大于0的数字，标准设置为1.0
minimum-scale最小缩放比，数值为一个大于0的数字，标准设置为1.0
user-scalable用户是否能缩放，yes或no（1或0）
<meta http-equiv="X-UA-Compatible" content="IE=edge">
X-UA-Compatible是针对IE8新增的设置，对IE8以外的浏览器不识别，IE=edge通知浏览器以最高级别的可用模式显示内容
2、常见标签
标题标签：<h1></h1>~~~<h6></h6>字体加粗，独占一行，块级元素
段落标签：<p></p>文本会根据浏览器大小自动换行，段落中有空隙，块级元素
换行标签：<br/>将文本强制换行，两行之间不会有间距,单标签
文本格式化标签：<strong></strong>或<b></b>加粗（行内元素）
<em></em>或<i></i>斜体（行内元素）
<del></del>或<s></s>删除线（行内元素）
<ins></ins>或<u></u>下划线（行内元素）
div标签：<div></div>用于布局，块级元素
span标签：<span></span>用于布局，行内元素
图像标签：<img> 用于定义html中的图像，行内块元素，单标签
常见属性：src 图片路径
alt 替换文本，图片不能显示时，显示该属性中的内容
title 提示文本，鼠标放在图像上，显示该属性中的内容
超链接标签：<a></a>用于定义html页面中的链接跳转，行内元素
常见属性：href 用于指定链接跳转目标的URL地址
target 用于指定连接打开方式，_self本页面跳转（默认值），_blank打开新窗口跳转
拓：锚点实现方法：①在链接文本的href设置属性值为“#自定义名称”的形式
②找到目标位置标签，在标签内添加id="上述自定义名称"
注释标签：//单行注释（Ctrl + /）
<!-- -->多行注释（Ctrl + Shift + /）
表格标签：<table>//用于定义表格
<th>//用于定义表格中的头部，其中内容加粗居中显示
<td></td>//用于定义表格中的单元格，行内块元素
</th>
<tr>//用于定义表格中的行
<td></td>
</tr>
</table>
属性：cellpadding 规定单元格边沿与其内容之间的空白
cellspacing 规定单元格之间的空白
表格结构标签：使表格结构更加清晰
<table>
<thead>//表格头部区域
<tr>
<td></td>
</tr>
</thead>
<tbody>//表格主题区域
<tr>
<td></td>
</tr>
</tbody>
</table>
拓：合并单元格：①跨行合并：rowspan="合并单元格个数"，代码写在最上侧单元格上
②跨列合并：colspan="合并单元格列数"，代码写在最左侧单元格上
列表标签：无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
自定义列表：用于对术语或名词进行解释的描述，列表项前无符号，常用于页面尾部使用
<dl>
<dt></dt>//用于定义项目名称
<dd></dd>//用于描述每个项目名字
</dl>
表单标签：用于收集用户信息，由表单域、表单控件、提示信息组成
表单域：<form></form>,实现用户信息的收集与传递,form会把他范围内的表单元素信息提交给服务器
属性：action 用于指定接收并处理表单数据的服务器的url地址
method 设置表单数据的提交方式，值为post或get
name 指定表单名称，用于区分多个表单
表单控件：<input>,单标签，行内块元素
常见属性：type 用于指定表单控件类型
name 用于指定表单控件名称
value 指定表单控件的内容
checked 规定表单控件首次加载时应当被选中
maxlength 规定输入字段最大长度
拓：type的常见值：button 按钮、radio 单选按钮、checkbox 复选框、password 密码字段、file 输入字段和浏览按钮、submit 提交按钮、text 单行文本域、image 图像形式提交按钮
label标签：绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点选择到对应得表单元素上。
实现方法：将label中得for属性与相关表单元素的id属性设置相同值
select标签：定义下拉列表，多选项供选择
<select>
<option></option>//下拉列表中的内容
</select>
在option标签中定义selected="selected"时，当前项为默认项
textarea标签：定义多行输入文本框
常见属性：cols 列数
rows 行数
面试题：
1、href和src的区别：
src用于替换当前元素，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；href用于在当前文档和引用资源之间确立联系，指向网络资源所在位置，建立和当前元素或当前文档之间的链接。
2、页面导入时，link和@import的区别：
link是xhtml标签，import是css提供的方式。link方式除了css，还可以定义rss，定义ref连接属性，而import只能加载css。
link是页面加载时同时执行的，而import是在页面加载完成之后，才会执行的，页面加载速度更快、结构化清晰、页面显示简洁。
link无兼容问题，而import存在兼容问题。
3、前端开发工具
-
Sublime Text
官网：http://www.sublimetext.com/download
-
Hbulider X
官网：https://www.dcloud.io/hbuilderx.html
-
WebStorm
官网：https://www.jetbrains.com/webstorm/download/#section=windows
-
DreamWeaver
官网：https://creativecloud.adobe.com/apps/download/dreamweaver
-
Visual studio Code
官网：https://code.visualstudio.com/Download
如果觉得对你有帮助的话，点个赞呗~
如需转载，请注明出处Hoki802
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
