前端知识-HTML
HTML
这个整理的也挺好的 https://www.cnblogs.com/suoning/p/5614372.html
1、HTML(结构)、CSS(样式)、JS(行为)
2、网页基本结构
<html> <head> <!-- 头部内容 --> </head> <body> <!-- 主体内容 --> </body> </html>
3、HTML的特点:标签成对出现;结束标签内用/开头;标签可以嵌套
4、DOCTYPE
定义:声明位于文档中的最前面的位置,处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。
标记和浏览器的兼容性相关,删除后就是把如何展示HTML页面的权利交给浏览器,不同浏览器会按照其默认的规范解析。
5、html标签:只能包含head和body,属性 lang
=
"en"
lang
=
"zh-cn"
用于设置语言
6、head标签:将页面的一些额外信息告诉服务器。不会显示在页面上
可以用在 <head>
里面的标签有: <title>
, <base>
, <link>
, <style>
, <meta>
, <script>
, <noscript>
。
具体内容请看这里:https://www.cnblogs.com/leyili/p/head.html
7、meta标签
重点:
详细:https://www.cnblogs.com/koto/p/5659627.html
8、body标签:
块级标签:p、div、ul、ol、li、dl、dt、dd、h1~h6、form、hr
行内标签:a、span、em、strong、b、i、u、label、br
行内块:img,input,textarea
基本标签(<h1>~<h6>、<p>、<b> <strong>、<strike>、<u>、<em> <i>、<sup>、<sub>、<br>、<hr>、<div>、<span>)
特殊符号(>、<、 、"、©...)
<a> 超链接标签(锚标签)(href、target、name)
<img> 图形标签(src、title、alt、width、height、align)
列表标签(<ul>、<ol>、<li>、<dl>、<dt>、<dd>)
<table> 表格标签(<table> 、<caption> 、<tr>、<th>、<td>、<thead>、<tbody>、rowspan、colspan)
<from> 表单标签(action、method、enctype、<input>、<textarea>、<select>、<label>、<fieldset>)
<frameset>
<iframe>
pre 可以直接写内容,浏览器展现与编写的内容一致,不解析空格换行
详细:https://www.cnblogs.com/guapitomjoy/p/11668540.html
9、列表
<ul> :无序列表标签
<li>:列表中的每一项.
<ol> :有序列表标签
<li>:列表中的每一项.
<dl> 自定义列表
<dt> 列表标题
<dd> 列表项
注意嵌套规则
10、表格
<table border="1"> <thead> <tr> <th>序号</th> <th>姓名</th> </tr> </thead> <tbody> <tr> <td>1.</td> <td>nick</td> </tr> <tr> <td>2.</td> <td>jenny</td> </tr> </tbody> </table>
<table> 表格标签
- border:(表格边框)
- align(水平对齐方式)
- bgcolor(背景颜色)
- cellpadding(内边距,单元格与内容之间的距离)
- cellspacing(外边距,单元格的间距,设置为0时,表格变为实线表格)
- width(表格的宽度,可以用%或者像素,最好通过css来设置长宽)
<caption> 表格的标题
<tr> 表格的数据行,table row
<th> 表格的表头名称,与<td>不同在于文字采用加粗居中的形式显示,table head cell
<td> 单元格,用来显示表格内容,table data cell
<thead> 表格头部,使结构更加分明
<tbody> 表格主体部分,使结构更加分明
rowspan 单元格竖跨多少行,作用在th或者td上
colspan 单元格横跨多少列(即合并单元格),作用在th或者td上
11、超链接
<a> 超链接标签(锚标签)
重要属性有三个:href、target、name
href 超链接地址:可以是Web上任意资源,包括图片,网页,样式,脚本文件等。href="#"时,表示被链接页面就是当前页面。
target 文档打开时要显示的目标位置,属性值一般有:
_blank(新窗口中打开)、
_self(默认,在超链接所在的容器中打开)、
_parent(在超链接的父容器中打开)、
_top(整个容器中打开)、
name(框架名称)。
name 锚记名称。作用:跳转到文档的某个地方。返回首页。
12、图片
行级标签,用来显示图片。
重要属性有:src、title、alt、width、height、align。
src 图片地址。
title 鼠标悬浮在图片上的文字。
alt 图片找不到时要替换的文字。如果图片资源使用的是外网资源,则不会显示要替换的文字。如果使用的是本网站的资源(相对路径给出),则找不到图片时会显示替换的文字,并保留图片设置的宽高结构。
align 图片周围文字的垂直对齐情况。常用的属性值有:top(与图片的顶部对齐)、middle(与图片的中部对齐)、bottom(默认,与图片的底部对齐)。
width 图片的宽
height 图片的高 (宽高两个属性只用一个会自动等比缩放.)
13、图片种类
详细:https://www.cnblogs.com/xiangism/p/5311314.html
详细: https://www.cnblogs.com/weinan/archive/2012/12/04/2801918.html
14、URL
详细:https://www.cnblogs.com/phpstudy2015-6/p/6810130.html
URL语法可以归纳到下面的通用格式上:
<scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>
- scheme:方案名,常见的是http/https/ftp/mail等协议。方案名是大小写无关的,即http://www.baidu.com与HTTP://www.baidu.com是等价的。
- user:用户名,在http协议中比较少见,默认值是匿名用户"anonymous"
- password:密码,与上面的user性质相同。在ftp协议中是比较常见的,比如ftp://user:password@ftphost/download。如果不指定密码,不同的浏览器实现会发送不同的默认密码。
- host:主机,资源的具体承载机器。一般使用域名或者IP来表示,使用IP的可以直接定位到具体机器,而使用域名的需要经过DNS解析后获得IP。
- port:端口,机器上的具体应用。在一台机器上一个端口对应一个应用,有了host+port就定位到资源的具体应用上了。http协议的默认端口是80,https的默认端口是443。
- path:路径,资源的分级目录。类似于文件系统的路径,可以使用多个/进行层级分割,每层都可以跟参数。
- params:路径对应的参数,不常用但合法。比如:http://www.baidu.com/china;type=a/beijing;degree=b
- query:查询字符串,与后端程序交互的关键,以?开始。比如:http://www.baidu.com?item=a&color=b
- frag:片段,也叫锚点。前面部分可以定位到具体某个资源文件,片段用来标识具体哪一个部分。而片段是不会发送给服务器的,服务器返回整个对象,浏览器根据片段来展示不同效果。
15、相对路径与绝对路径
详细:https://www.cnblogs.com/heyonggang/archive/2013/03/01/2938984.html
1.绝对路径
先说在本地计算机上,文件的绝对路径当然是指:文件在硬盘上真正存在的路径。
还有超链接文件位置,也属于绝对路径,例如http://www.img.net/img/icon.jpg 。
2.相对路径
相对路径,顾名思义就是自己相对与目标位置。
16、表单
input标签的type有哪些?
其中,button、checkbox、file、hidden、image、password、radio、reset、submit、text这10个是传统的输入控件,
新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week共13个
https://www.cnblogs.com/xiaohuochai/p/5179909.html
17、html语义化与seo
语义化:https://www.cnblogs.com/freeyiyi1993/p/3615179.html
seo:https://www.cnblogs.com/singlepine/archive/2006/07/23/457820.html
https://www.cnblogs.com/EnSnail/p/5671345.html
18、link标签
https://www.cnblogs.com/kingjiong/archive/2010/02/25/1673322.html
19、DNS域解析
https://www.cnblogs.com/anyhoo/p/10369589.html
20、编码实体
https://www.cnblogs.com/zccee/archive/2012/02/04/2338515.html
21、html5的新特性
https://www.cnblogs.com/binguo666/p/10928907.html
备注:
vscode插件:open
参考:
https://www.cnblogs.com/qianguyihao/p/4850684.html
https://www.cnblogs.com/suoning/p/5614372.html