前端自学学习笔记——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