第一篇（HTML5)整理笔记

最新推荐文章于 2024-07-14 10:34:53 发布

鸽子GE

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量240

点赞数

文章标签： html

本文链接：https://blog.csdn.net/wuhuaGEZI/article/details/123364327

版权

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老师的视频整理的学习笔记，方便日后复习。

鸽子GE

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第一篇（HTML5)整理笔记

<!DOCTYPE> 文档类型声明---------------<!DOCTYPE html> HTML5的声明主骨架<html><head><title></title></head><body>...</body></html&g...
复制链接

扫一扫