前端开发-HTML快速掌握上手知识总结
网页的组成
html,css,js三部分组成.
html:结构
css:行为
js:表现
*:w3c制定了html/css语法和标准,ECMA制定了行为标准.
qq截图认字小技巧
在选项栏里点翻译可以识别图片翻译字体复制
vscode编辑器使用
点击文件选项===》将文件夹添加到工作区 ====》选择文件路径
或者拖拽文件
####编辑器的扩展插件
汉化插件 chinese
打开浏览器 open in browser
笔记插件
Markdown All in One
Markdown preview enchanced
快捷键:
1.把网页相同的字改成同样的样式
复制单行标签光标放到末尾:ctr+c/ctr+v
复制一段:shift+ctrl+上下键:
ctrl+f 查找相同的字
ctrl+h替换相同的字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2rKKth79-1635759505825)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20210721094814277.png)]全部替换
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CSDpzFRN-1635759505829)(C:/Users/Administrator/Pictures/前端学习图片/相同的字替换样式技巧.png)]
2.给页面两边留出空白部分
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7PuoovTM-1635759505830)(C:/Users/Administrator/Pictures/前端学习图片/给页面两边留出空白部分.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DsFRPq9s-1635759505833)(C:/Users/Administrator/Pictures/前端学习图片/给页面两边留出空白部分效果图.png)]
html/xhtml/html5区别
html:超文本语言
xhtml:指可扩展超文本标记语言（标识语言）,标签名必须用小写字母，XHTML 文档必须拥有根元素,语义更强.
html5:经过五次重大的修改的语言,H5网络标准统一，可以跨平台，多设备使用，语义化比较强
#vscode 推荐插件
Atuo Rename Tag
修改 html 标签，自动帮你完成尾部闭合标签的同步修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cqiOie9g-1635759505843)(…/千峰学习/html/day02/笔记/1.gif)]
Path Intellisense
自动路径补全
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xaANjhHS-1635759505845)(…/千峰学习/html/day02/笔记/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XLimim5O-1635759507171)(2.mp4)]].png)
vscode-icons
让 vscode 资源树目录加上图标
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y6JkRfKO-1635759505847)(…/千峰学习/html/day02/笔记/2021-07-20-20-44-39.png)]
文件命名规范
由数字,英文,下滑线组成,不能有特殊的符号,小写字母开头,不能数字开头,符合语义化,比如:image01,…
文件项目
1.css、
2.js、
3.images（图片）、4html
HTML初了解
HTML骨架
DOCTYPE html> 文档类型:html/xhtml/html5,告诉我们使用哪个html版本.
<html lang="en">
<head> 头部标签,描述网页信息和属性,通常不被读者看到
<meta charset="UTF-8"> 字符集,UTF-8最大
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle> 网页标题
head>
<body> 内容标签
body>
html> 根标签
标签属性
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 标签名>
html标签的常用标签及分类
html分单标签和双标签:
1.单标签
换行
水平线
2.双标签
上标
下标
加粗
删除线段落标签
倾斜标签
下划线标签
//是没有语义的 是我们网页布局主要的2个盒子 css+div
单行一个
单行多个
//标题标签
h1-h6,h1最大一般用于最大标题,h6最小,语义更好
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-11JpsgVh-1635759505850)(C:/Users/Administrator/Pictures/前端学习图片/htmlxhtml分类.png)]
xhtml:语义更强,加重.
html标签的嵌套关系
html嵌套关系:
1.父子关系
HTML语义化
语义化是:
1.代码更加规范,方便阅读和查找,修改信息.
2.让爬虫更好的解析,从而更好的分析网站.
3.优化搜索引擎效率.
图像标签img
<img src="图片路径" alt="图片不显示时提示文字"
title="图片显示提示文字" width="宽度" height="高度" border="图像边框" >
width:像素px(XHTML不支持%百分比)
height:像素px(XHTML不支持%百分比)\
border:默认为1
a链接标签
链接标签
空链接 blank新网页目标打开,self默认没有新目标,
外部链接,rel="nofollow"
内部链接
点击下载ppt 谷歌浏览器会直接下载文件,其他浏览器会提示下载
*不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
*注意:rel="nofollow"
1.屏蔽付费链接
2.不可信赖的用户制造的垃圾
3.按优先级别进行抓取
图像链接
<a href="http://www.baidu.com"><img src="E:\前端笔记\图片\超大背景图.jpg" alt="">a>
base标签
base标签
特殊字符标签 （理解）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9PVZAC4Y-1635759505853)(C:/Users/Administrator/Pictures/前端学习图片/特殊字符标签.png)]
注释标签
ctrl + / 或者 ctrl +shift + /
路径(重点)
1.相对路径:
-
图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如
。 -
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如
。 -
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如
。简写:
同级路径 image/log.gif
下一级路径 image/image01/image02/log.gif
上一级路径…/…/image/log.gif
2.绝对路径:
以从磁盘开始找的路径根目录开头,
“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
列表标签
列表标签*
扩展： style="list-style:none;"
使用css设置无序列表去除默认圆点样式
<ul style="list-style:none;">
无序列表,排序开头有个圆点
<ul>
<li></li>
<li></li>
<li></li>
</ul>
有序列表*
type排序的类型 1、A、a、I、i ,start从哪一个开始排序
<!-- D E F G H J ,从D开始 -->
<lo type="A" strat="4">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</lo>
自定义列表*
<dt>
<dl>列头</dl>
<dd>单元</dd>
</dt>
无序列表:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-159IlMlV-1635759505855)(C:/Users/Administrator/Pictures/前端学习图片/无序列表.png)]
有序列表:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W8Pt7BY9-1635759505858)(C:/Users/Administrator/Pictures/前端学习图片/有序列表.png)]
自定义列表:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4FLlwmmU-1635759505861)(C:/Users/Administrator/Pictures/前端学习图片/自定义列表.png)]
表格table
常用表格属性:
<table>…table>：定义表格
<caption>:表格标题
<th>…th>：定义表格的标题栏（文字加粗）
<tr>…tr>：定义表格的行
<td>…td>：定义表格的列
cellspacing属性-定义表格单元格之间的空间
cellpadding属性-表示单元格边框与单元格内容之间的距离
border属性:表格的宽度默认为1px
如果要将两个或多个列合并为一个列，将使用colspan属性
如果要合并两行或更多行，则将使用rowspan属性。
width = "400" height = "150"
其他内容看w3c
text-align:center; 表格居中
valign: center; 垂直居中
css样式:
border-spacing:0; 单元格与单元格之间的距离（代替cellspacing）
border-collapse: collapse; 合并重叠的边框
empty-cells:hide 内容为空隐藏但是还是占位.
table-layout: (设置单元格的宽度)fixed 固定 auto内容撑开
注意:
1.同行合并是合并列,跨行合并是合并行,先合并列,后合并行.
2.合并的属性给单元格设置,th,td
*合并很多先合并列,再合并行
跨列合并:
<table width="400" height="100" border="1">
<tr>
<td>1td>
<td>1td>
<td>1td>
<td>1td>
tr>
<tr>
<td>2td>
<td>2td>
<td colspan="2">2td>
tr>
<tr>
<td>4td>
<td>4td>
<td>4td>
<td>4td>
tr>
table>
跨行合并:
<table width="400" height="100" border="1">
<tr>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td rowspan="2">td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
tr>
table>
表单域form
在HTML中，form标签被用于定义表单域，即创建一个表单，存储用户信息的收集和传递，form中的所有内容都会被提交给服务器。
创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
form>
常用属性：
- Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。 - method
用于设置表单数据的提交方式，其取值为get或post。 - name
用于指定表单的名称，以区分同一个页面中的多个表单。 - get: 显示账号密码不安全,数据量不能超过2kb,不推荐,服务器接收get速度比较快
- post:数据量2GB内都可以,提交隐藏显示安全,
注意： 每个表单都应该有自己表单域。
form属性:
autocomplete 设置历史记录(on/off)
enctype 可以发送携带数据(后端设置)
novalidate 验证功能,防止用户瞎填
taeget
input的属性:
autofocus 自动焦点(不用点)
checked 单选和多选的默认选中
disabled 禁用
//数字提交范围:min 最小数值,max 最大数值,针对于数字类型. step 数字间隔
placeholder 不占位,按钮提示背景信息
readonly 不能修改value,只能读,不能和placeholder在一起
required 内容只读文本不能为空,会提示文字信息
表单标签input
input为单标签,type是类型可以设定不同控件,一般和表格搭配.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N0uJbVg5-1635759505866)(C:/Users/Administrator/Pictures/前端学习图片/htmi表单标签.png)]
*file:不能改样式,可以用labelfor改样式
<label for="file">上传label>
<input type="file" id="file" style="display:none;">
案例: 04 input控件
表格:
cellspacing=“0” :单元格之间的空白距离
cellpadding=“0” :单元内边距格与单元内容之间的距离
label for标签(行内)
label标签为input 元素定义标注（标签）。
作用:用于绑定一个表单元素,点击绑定内容会跳转到表单目标的焦点.
语法:
<tr>
<td>
<labe for="mima">密码labe>
td>
<td>
<input type="password" name="" value="123456" maxlength="5" id="mima">
td>
tr>
下拉选项select
select控件写法:
注意：
- 中至少应包含一对。
- 在option 中定义selected =" selected "时，当前项即为默认选中项。
- 设置选项不可选禁用,disabled
<select name="" id="">
<option>选项1option>
<option disabled="disabled" selected="selected">选项2option>
<option>选项3option>
...
select>
<tr height="60">
<td>年龄td>
<td>
<select name="" id="">
<option value="">籍贯option>
<option value="" selected="selected">北京option>
<option value="">哈尔滨option>
<option value="">青岛option>
<option value="">大连option>
select>
td>
tr>
textarea控件(文本域)
如果需要输入大量的信息，就需要用到标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数"
style="resize:none; outline:none;">
文本内容
textarea>
行内样式:
取消文本域拖拽效果:resize:none; 取消文本域拖拽
取消文本域点击外部光标: outline:none;
表单字段集fieldset
表单字段集（自带边框线，又间距）
对于表单内容分组和嵌套，设置表单内容的排版
fieldset 表单字段集
legend 字段集标题
button按钮
查文档
经常查阅文档是一个非常好的学习习惯。
W3C : http://www.w3school.com.cn/
lt;/textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数"
style="resize:none; outline:none;">
文本内容
textarea>
行内样式:
取消文本域拖拽效果:resize:none; 取消文本域拖拽
取消文本域点击外部光标: outline:none;
表单字段集fieldset
表单字段集（自带边框线，又间距）
对于表单内容分组和嵌套，设置表单内容的排版
fieldset 表单字段集
legend 字段集标题
button按钮
查文档
经常查阅文档是一个非常好的学习习惯。
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/