成 | 语言 | 描述 |
结构 | HTML | 网页元素和内容 |
表现 | CSS | 网页元素页面样式 |
行为 | JavaScript | 网页交互 |
HTML,超文本标记语言(Hyper Text Markup Language),是一门描述性语言。标记,标签,元素,叫法不同,意思相同。HTML超文本标记语言主要通过标签的方式,对网页页面的文本、图片、音频、视频等内容进行描述。学习HTML,就是学习各种标签,来搭建网页的结构。
结构:!DOCTYPE
说明:作用是告诉浏览器用哪个文档规范来解析文档
标签:html
说明:用于搭建HTML网页文档结构和网页布局
标签:head
说明:用于定义HTML网页文档的头部,它是所有头部元素的容器
标签:body
说明:用来定义HTML网页文档的主体区域
标签:meta
说明:用来描述HTML网页文档的属性
标签:title
说明:用来放到HTML网页文档的头部,是搜索引擎首要抓取的目标代码
标签,也叫作标记,是由一对尖括号<>,里面包含单词组成
<html></html>
<br>
嵌套关系
<html>
<head>
</head>
</html>
并列关系
<head>
</head>
<body>
</body>
注释用来帮助程序员记录程序设计方法,辅助程序阅读
双标签,定义网页的标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>百度一下,你就知道了</title>
</head>
<body>
</body>
</html>
是单标签,用来描述HTML网页文档的属性
属性值 | 说明 |
keywords | 网页关键字,多个逗号隔开 |
description | 网页描述 |
author | 作者 |
copyright | 版权信息 |
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 网页关键字 -->
<meta name="keywords" content="html,css,javascript">
<!-- 网页描述 -->
<meta name="description" content="基础前端知识">
<!-- 网页作者 -->
<meta name="author" content="buddha">
<!-- 网页版权信息 -->
<meta name="copyright" content="版权所有,翻版必究">
</head>
<body>
</body>
</html>
标签属性:
1、标签的属性写在开始标签内部
2、标签名与属性之间要有空格隔开
3、一个标签可以同时存在多个属性
4、属性之间以空格隔开
5、属性没有先后顺序之分
属性值 | 说明 |
Content-Type | 定义网页所使用编码 |
refresh | 定义网页自动刷新跳转 |
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置网页编码完整写法 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- 设置网页编码简写写法 -->
<meta charset="UTF-8">
<!-- 网页打开3秒后跳去百度 -->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>
</body>
</html>
是双标签,用来定义标签的css样式
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
/* css内联样式写这里 */
</style>
</head>
<body>
</body>
</html>
是单标签,是用来引入外部css样式文件
<link rel="stylesheet" href="css/index.css" type="text/css">
是双标签,是用来写JavaScript代码的地方
<!DOCTYPE html>
<html lang="en">
<head>
<script>
/* 这里写JavaScript代码 */
</script>
</head>
<body>
</body>
</html>
是单标签,是用来设置整个网页的基础路径。
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://pic.rmb.bdstatic.com">
</head>
<body>
<img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>
开发中很少用到,有人使用知道就行
上面所述标签是放在head标签里的,接下来接触的标签都是放在body标签内的
是双标签,h是header的缩写
<h1>h1标签:一级标题</h1>
<h2>h2标签:二级标题</h2>
<h3>h3标签:三级标题</h3>
<h4>h4标签:四级标题</h4>
<h5>h5标签:五级标题</h5>
<h6>h6标签:六级标题</h6>
特点:
1、字体加粗
2、独占一行
3、从h1到h6,字体逐渐减小
4、使用<h>标签的主要意义是告诉搜索引擎这是一段文字的标题
5、<h1>在一个页面最多只能有一个,不要用多个
是双标签,p是paragraph的缩写
<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>
特点:
1、独占一行
2、段落与段落之间,存在间隙
是单标签,br是break的缩写
<p>这是一段<br>文字</p>
特点:
1、强制换行
2、单标签
是单标签,hr是horizon地平线的缩写
<p>这是一段文字</p>
<hr>
<p>这是一段文字</p>
特点:
1、在页面中显示一条水平线
2、单标签
标签1 | 标签2 | 说明 |
b | strong | 加粗 |
u | ins | 下划线 |
i | em | 倾斜 |
s | del | 删除线 |
<b>这是一段文字</b>
<strong>这是一段文字</strong>
<br>
<u>这是一段文字</u>
<ins>这是一段文字</ins>
<br>
<i>这是一段文字</i>
<em>这是一段文字</em>
<br>
<s>这是一段文字</s>
<del>这是一段文字</del>
特点:
1、不会独占一行
2、推荐使用标签2所在列标签
sup是superscripted这个单词的缩写
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
a<sup>2</sup>
</body>
</html>
sub是subscripted这个单词的缩写
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
H<sub>2</sub>O
</body>
</html>
在网页中展示特殊符号效果时,需要使用字符实体替代
显示结果 | 描述 | 实体名称 |
空格 |
| |
< | 小于号 | < |
> | 大于号 | > |
& | 与 | & |
" | 双引号 | " |
x | 乘号 | × |
÷ | 除号 | ÷ |
- | 长破折号 | — |
| | 竖线 | | |
‘ | 左单引号 | ‘ |
‘ | 右单引号 | ’ |
© | 版权符 | © |
® | 注册商标 | ® |
™ | 商标 | ™ |
° | 度 | ° |
<img src="./001.jpg" alt="">
img标签常见属性:
属性名 | 说明 |
src | 图片路径(绝对路径、相对路径) |
alt | 图片加载失败时,显示的文字 |
title | 鼠标悬停时,显示的文字 |
width | 图片宽度 |
height | 图片高度 |
只设置宽或高,会自动等比缩放,宽高只需要数字,不需要'px'
<img src="./001.jpg" alt="图片加载失败" title="这是程序兔" width="200" height="200">
绝对路径:指目录下的绝对位置,比如从根目录开始的路径,或完整的网络地址
相对路径:从当前文件开始出发找目标文件的过程
<audio src="music.mp3" controls autoplay loop></audio>
audio标签常见属性:
属性名 | 说明 |
src | 音频路径 |
controls | 显示播放控件 |
autoplay | 自动播放 |
loop | 循环播放 |
支持mp3、wav、ogg三种音频格式
<video src="video.mp4" controls loop autoplay></video>
属性名 | 说明 |
src | 视频路径 |
controls | 显示播放控件 |
autoplay | 自动播放 |
loop | 循环播放 |
支持mp4、webm、ogg三种视频格式
超链接,是双标签,实现各个独立页面之间进行跳转,可以跳去站外也可以在站内之间跳转
<a href="链接地址">文本或图片</a>
站外跳转,采用绝对路径
<a href="http://www.baidu.com" target="_blank">百度</a>
站内跳转,采用相对路径
<!-- a页面 -->
<a href="b.html">跳去b页面</a>
<!-- b页面 -->
<p>b页面</p>
页面内跳转
<a href="#ms">美食</a>
<a href="#jd">景点</a>
<h3 id="ms">推荐美食</h3>
<!-- 省略n个br标签 -->
<br>
<h3 id="jd">推荐景点</h3>
属性名 | 说明 |
href | 跳转链接 |
target | 链接打开方式 |
target属性值
属性值 | 说明 |
_self | 默认,原窗口打开链接 |
_blank | 在新窗口打开链接 |
_parent | 在父窗口打开链接 |
_top | 在顶层窗口打开超链接 |
target属性值一般使用_self(默认)和_blank
<ul type="属性值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
解释:
1、ul,unordered lists,无序列表,li,list item,列表项
2、ul标签子标签只允许是li标签
3、li标签可以包含任意内容
type属性值
属性值 | 说明 |
disc | 默认,实心圆 |
circle | 空心圆 |
square | 实心方型 |
<ul>
<li>你</li>
<li>我</li>
<li>他</li>
</ul>
<ol type="属性值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
解释:
1、ol,ordered lists,有序列表,li,list item,列表项
2、ol标签子标签只允许是li标签
3、li标签可以包含任意内容
type属性值
属性值 | 说明 |
1 | 默认,阿拉伯数字,1,2,3...... |
a | 小写英文字母,a,b,c...... |
A | 大写英文字母,A,B,C...... |
i | 小写罗马数字,i,ii,iii...... |
I | 大写罗马数字,I,II,III...... |
<ol>
<li>你</li>
<li>我</li>
<li>他</li>
</ol>
<dl>
<dt>名词</dt>
<dd>描述</dd>
……
</dl>
解释:
1、dl,definition lists,自定义列表;dt,definition term,自定义列表组;dd,definition description,自定义列表描述
<dl>
<dt>称呼</dt>
<dd>你</dd>
<dd>我</dd>
<dd>他</dd>
</dl>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
解释:
1、tr,table row,表格行;td,table data cell,表行单元格
<table>
<tr>
<td>1</td>
</tr>
</table>
属性名 | 属性值 | 描述 |
border | 数字 | 边框宽度 |
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
<table border="1" width="200" height="50">
<tr>
<td>1</td>
</tr>
</table>
<caption>标题内容</caption>,位于表格内第一行
<table border="1" width="200" height="50">
<caption>数字</caption>
<tr>
<td>1</td>
</tr>
</table>
<th></th>,th,table header cell,表头单元格
<table border="1" width="200" height="50">
<caption>数字</caption>
<tr>
<th>序号</th>
</tr>
<tr>
<td>1</td>
</tr>
</table>
thead、tbody、tfoot
<table border="1" width="200" height="50">
<caption>数字</caption>
<thead>
<tr>
<th>序号</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>汇总</td>
</tr>
</tfoot>
</table>
属性名 | 属性值 | 说明 |
rowspan | 合并单元格个数 | 合并行,单元格垂直合并 |
colspan | 合并单元格个数 | 合并列,单元格水平合并 |
<td rowspan="跨越的行数"></td>
<td colspan="跨越的列数"></td>
<table border="1" width="200" height="50">
<caption>数字</caption>
<thead>
<tr>
<th>序号</th>
<th>金额</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="2">20</td>
<td rowspan="2">20</td>
</tr>
<tr>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>汇总</td>
<td colspan="2">40</td>
</tr>
</tfoot>
</table>
双标签,包裹其它表单标签
<form>
// 表单
</form>
form标签的常用属性
属性 | 说明 |
name | 表单名称 |
method | 提交方式 |
action | 提交地址 |
target | 打开方式 |
enctype | 编码方式 |
name属性
一个页面中,表单可能不止一个。name属性,用来区分不同的表单
<form name="myForm"></form>
method属性
用来指定表单数据使用哪种提交方式给后端
属性值 | 说明 |
get | get方式 |
post | post方式 |
<form method="get"></form>
action属性
用来指定表单数据提交到哪个地址
<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>
target属性
该属性跟a标签的target属性一样,其属性值也是四个,一般情况只用到_blank属性值,默认也是这个值
<form target="_blank"></form>
enctype属性
属性值 | 说明 |
application/x-www-form-urlencoded | 在发送前编码所有字符(默认) |
multipart/form-data | 不对字符编码,在使用包含文件上传控件的表单时,必须使用该值 |
text/plain | 空格转换为 "+" 加号,但不对特殊字符编码 |
<form enctype="multipart/form-data"></form>
input是单标签
<input type="表单类型">
属性值 | 说明 |
text | 单行文本框 |
password | 密码文本框 |
radio | 单选框 |
checkbox | 多选框 |
button | 普通按钮 |
submit | 提交按钮 |
reset | 重置按钮 |
file | 文件上传 |
单行文本框常用属性
属性 | 说明 |
value | 设置文本框的默认值 |
size | 设置文本框的长度 |
maxlength | 设置最多可输入字符 |
<form>
<input type="text" value="默认值" size="长度" maxlength="可输入字符">
</form>
<form>
<label>姓名:<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>
密码文本框常用属性
密码文本框常用属性和单行文本框常用属性相同
<input type="password" value="默认值" size="长度" maxlength="可输入字符">
<form>
<label>密码:<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>
单选框
属性 | 说明 |
name | 组名,同组单选框,组名要相同,必要属性 |
value | 单选框选项取值,必要属性 |
checked | 默认选中项,同组单选框,可以有一个默认选中项 |
<input type="radio" name="组名" value="取值" checked="checked">
<form>
性别:
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
</form>
复选框
复选框和单选框的属性都相同,区别复选框可以多选
<form>
爱好:
<input type="checkbox" name="hobby" value="篮球" checked>篮球
<input type="checkbox" name="hobby" value="足球" checked>足球
<input type="checkbox" name="hobby" value="台球">台球
</form>
普通按钮
<input type="button" value="取值">
<form>
<input type="button" value="普通按钮">
</form>
<button>普通按钮</button>
区别:
1、input是单标签,button是双标签
2、button标签的信息除了文本,还可以是图像、其它标签等
3、button有type属性,属性值可以是button、submit、reset等
提交按钮
<input type="submit" value="取值">
<form>
<input type="submit" value="提交">
</form>
把对应表单数据提交给后端服务器
重置按钮
<input type="reset" value="取值">
<form>
<input type="reset" value="重置">
</form>
点击重置后,所在form表单里所有内容被清空了
文件上传
<input type="file">
<form>
<input type="file">
</form>
<textarea name="文本名称" cols="列数" rows="行数"></textarea>
<form>
<textarea name="文本名称" cols="1" rows="2"></textarea>
</form>
<select>
<option>选项内容</option>
<option>选项内容</option>
</select>
下拉列表标签是为了节省页面空间
select标签属性
属性名 | 说明 |
name | 数据提交后端所需字段 |
size | 下拉选项显示个数 |
multiple | 默认只允许选一个,选多个得加这个属性 |
disabled | 所有下拉选项禁止选中 |
<form>
<select name="age" size="4" multiple="multiple" disabled="disabled">
<option>18岁以下</option>
<option>18-28岁</option>
<option>28-38岁</option>
<option>38岁以上</option>
</select>
</form>
option标签属性
属性名 | 说明 |
selected | 默认选中 |
value | 被选中,数据提交后端的值 |
disabled | 该下拉选项禁止选中 |
<form>
<select name="age" size="5">
<option value="1">18岁以下</option>
<option value="2" disabled="disabled">18-28岁</option>
<option value="3" selected="selected">28-38岁</option>
<option value="4">38岁以上</option>
</select>
</form>
<iframe src="URL" width="数值" height="数值"></iframe>
框架标签常用属性
属性名 | 说明 |
src | 嵌入的文档地址 |
width | 标签宽度 |
height | 标签高度 |
<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>
有些文档禁止被嵌入
HTML标签分为三种,行内标签、块级标签和行内块级标签。
特点:
1、在页面内只占据刚好能包裹自己内容的空间
2、没有宽高,内容多大就多大,行内标签不能嵌套块级标签(a标签除外)
3、行内标签设置宽高无效,可以对行高line-height进行设置
4、可以设置外边距margin和内边距padding,但只对左右边距有效果,上下无效
5、常见行内标签span、a、strong、ins、del、br等
span标签
双标签,行内标签,本身没有固定样式
<p>我是<span>中国人</span></p>
特点:
1、独占一行
2、高度、宽度、外边距、内边距都可以设置生效
3、宽度默认是父级宽度的100%
4、是一个容器盒子,可以嵌套多层子级行内标签、块级标签,文本类块级标签除外
5、常见块级标签div、p、h1~h6、ol、ul、li等
div标签
双标签,块级标签,本身没有固定样式
<!-- 头部区域 -->
<div></div>
<!-- 内容区域 -->
<div></div>
特点
1、在页面内只占据刚好能包裹自己内容的空间
2、高度、宽度、外边距、内边距都可以设置生效
3、常见块级标签img、input、td
通过css样式display属性转换,这是css的内容
纲
1、什么是<a>标签
2、<a>标签的几个重要属性
3、a标签的运行机制
4、a标签常用的协议
5、超链接标签的样式问题——a标签的伪类选择器的书写顺序
1、什么是<a>标签
<a> 标签定义超链接,用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性,它指示链接的目标。
2、<a>标签的几个重要属性
2.1、href
规定链接指向的页面的 URL。
2.2、target
规定在何处打开链接文档。
a:自定义打开锚点
target的特殊值:有 4 个保留的目标名称用作特殊的文档重定向操作:
2.3、name
规定锚的名称。(Html5不支持)
2.4、downloadHTML5新增
HTML5新增,只有 Firefox 和 Chrome 支持 download 属性。
download 属性规定被下载的超链接目标。
在 <a> 标签中必须设置 href 属性。
该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
1
<a href="/images/myw3schoolimage.jpg" download="w3logo">
2.5、media
media 属性规定目标 URL 是为什么类型的媒介/设备进行优化的。
该属性用于规定目标 URL 是为特殊设备(比如 iPhone)、语音或打印媒介设计的。
该属性可接受多个值。
只能在 href 属性存在时使用。
3、a标签的运行机制
4、a标签常用的协议
5、超链接标签的样式问题——a标签的伪类选择器的书写顺序
5.1、a标签的多重状态
对于<a>元素,我们可以用“多重人格”来形容它。对于该标签,它一共有五种状态::link, :visited, :hover, :focus, :active.
“:link”可以用于声明未访问状态链接的样式;
“:visited”可以用于声明已经访问链接的样式;
“:hover”可以用于声明鼠标悬停在链接上的样式;
“:focus”可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接);
“:active”可以用于声明浏览器点击链接的样式。
注意:冒号前后不要出现空格
一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。
link、visited、active分别对应body元素的link、vlink、alink这三个属性。
四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的)。
5.2、链接(a标签状态)定义的顺序
没有规矩不成方圆,虽然链接定义写好了,但它也是有规则的,如果这四项的书写顺序稍有差错,链接的效果可能就没有了,所以每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。
老外总结了一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。定义A链接样式的正确的顺序:a:link、a:visited、a:hover、a:active。若没有按照这样的顺序的话,有的状态的样式会被放置在后面的样式覆盖而导致像没有触发一样没有效果,如:如果hover放在visited之后,则就算我放上去变色了,但是同时这个标签也具有visited状态以及其的效果,会覆盖了hover的效果。
为了符合浏览器解释CSS遵循的"就近原则"。我们在定义CSS中,宜将最一般的条件放在最上面,并依次向下,最下面放最特殊的。
在W3C规范中,也规定了链接的声明顺序:
在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。
在前端开发编写html文件的时候,我们可能会很熟练的写出常见的html元素,但是如果问到某些元素的差别时,大家不一定能说的出来,今天就给大家总结一下那些很常见但容易混淆的属性。
html与css
css样式文件引入的方式有两种,分别是link标签和@import。
link语法结构
link语法结构如下,注意rel='stylesheet'属性要加上。
link语法结构
@import语法结构
当@import用在html中时,需要配合style标签
@import在html中
当@import用在css文件中,直接使用@import url()即可
@import在css中
既然link与@import都可以用来引入css,那么它们的区别是什么呢?我们又该如何选择呢?
link是XHTML标签的一种,除了可以加载css外,还可以定义其他rel属性,而@import只能用来加载css。
link标签在加载css时,与页面一同加载,而@import需要等到网页完全加载以后才进行加载。
link是XHTML标签,不存在兼容问题,而@import是在CSS2.1中提出的,对于低版本的浏览器不支持。
link标签可以通过Javascript代码去控制其属性,而@import不可以。
javascript控制link
@import支持在css文件中再次引入其他css文件,方便对多个css文件的管理。
因为@import引入的文件需要在网页完全加载后再加载,如果在网络速度较慢的情况下,会出现页面闪现,因此建议使用link标签代替@import。
html元素的readonly与disabled属性一般都是用于无法改变表单的内容,但是两者也是有区别的。
readonly属性只针对input(text,password)和textarea元素,而disabled适用于所有表单元素,包括select,radio,checkbox,button等。
在表单元素使用了disabled后,该元素的的值不会随着form的action请求传递到服务器端,而使用readonly的元素值可以传递到服务器端。
以下是一些关于两者的使用建议。
在表单中为用户预填的唯一标识码,不允许用户改动,而且需要传递到后台的使用readonly属性。
用户提交完表单元素后,等待服务器端的验证,这个过程应该将元素设为disabled,button和submit也应该设为disabled,以防止重复提交。
title属性
img标签的title属性是用来提供一些建议性的信息,在鼠标停留在上方时会显示,它对于图片来说只是一种注释性的信息,重要性偏低。
alt属性
alt属性是为不能显示图像时,用来指定替换文字,需要注意的是替换文字是用来代替文字的,而不是用来注释文字的。
属性的使用
在做图片为主的网页时,考虑到网页的SEO,应当设置图片的alt属性为图片的真实内容,而给title设置一些建议性的内容。
今天这篇文章主要将了几个html中容易混淆的属性,你有收获吗?
*请认真填写需求信息,我们会在24小时内与您取得联系。