Web标准提出最佳体验方案:结构、样式、行为分离(结构写到HTML文件中,样式写到CSS文件中,行为写到JavaScrip中。
(1)<!DOCTYPE> 文档类型声明---------------<!DOCTYPE html> HTML5的声明
<html lang="zh-CN"> 中文
<html lang="en"> 英文
charset字符集---------------------------------<meta charset="UTF-8>(UTF-8是万国码,
声明在<head></head>内,若未声明,则可能产生乱码)
<!--注释文字 --> 快捷键Ctrl+/,将当前一行代码注释,再按则解除注释。
快捷键Ctrl+Shift+/,生成<!-- -->,两者略有不同。
(2)主结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> 内容... </body> </html>
(3)HTML常用标签
双标签:
- <h1> - <h6> 从一级标题到六级标题逐渐变小,按重要性运用。
- <p> 段落标签(块元素)
- <strong>/<b> 字体加粗
- <em>/<i> 字体倾斜
- <del>/<s> 删除线
- <ins>/<u> 下划线
- <div>/<span> 盒子(没有语义,用来装内容)
特点:1、<div>标签用来布局,但是一行只能放一个<div>,大盒子
2、<span>标签用来布局,一行可以有多个<span>,小盒子
- <a> 超链接(行内元素)
特点:
语法格式:<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
href:必须属性,指定链接目标的url地址,实现超链接的功能
target:指定链接网页的打开方式,_self在当前窗口打开(默认),_blank在新窗口打开
链接分类:
1、外部链接:例如<a href="http:/www.baidu.com"> 百度 </a>。
2、内部链接:网站内部页面之间的相互链接直接链接内部页面名称即可, 例如 <a href=" index.html">首页</a>。
3、空链接:如果当时没有确定链接目标时,<a href=”#”> 首页 </a>。
4、下载链接:如果href 里面地址是一个文件或者压缩包,会下载这个文件。
5、网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。6、锚点链接:可以快速定位到页面中的某个位置。
——在链接文本的href 属性中,设置属性值为#名字的形式,如<a href="#two">第2集</a>
——找到目标位置标签,里面添加一个d属性=刚才的名字,如:<h3 id= “two”>第2集介绍</h3>
单标签:
- <br /> 换行
- <img src="图像url" /> 显示图像
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,当图片不能显示时说明图片 |
title | 文本 | 提示文本,鼠标放在图片上出现的文字 |
width | 像素px | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
注意:一般设置图像大小,只要设置width、height中的一个,另一个就会等比变化。
属性的顺序是不分先后的。
4、特殊字符
5、路径
6、表格标签
语法格式:
<table> <tr> <td> ... </td> </tr> </table>
<th></th>加粗居中
<thead></thead>表格的头部
<tbody></tbody>表格的主体区域
合并单元格
合并单元格三步曲:
1.先确定是跨行还是跨列合并。
2.找到目标单元格.写上合并方式=合并的单元格数量。比如:<td colspan= "2” ></td>。
3.删除多余的单元格。
7、列表标签
无序列表(重点):
有序列表(理解):
自定义列表(重点):
8、表单标签
写表单标签时,先写<form></form>表单域,再写<input type="">或<select>,
记得写name属性。
input标签
5.placeholder文本框提示文字。
6.submit和button中,属性οnclick="alert('内容')",会出现提示框。
label标签
select标签
班级 <select name = "bj"><!-- 选择框 -->
<option value="0">请选择班级</option>
<option value="1">班级1</option>
<option value="2">班级2</option>
<option value="3">班级3</option>
<option value="4">班级4</option>
<option value="班级5">班级5</option>
</select>
红:标签 黄:属性 绿:值
textarea标签
谢谢传智播客的pink老师!以上是看pink老师的视频整理的学习笔记,方便日后复习。