目录
前言
本篇文章本人在学习html的笔记,本文参考了代码重工里的笔记,以及网上的视频教程
一.HTML简介
一、什么是HTML？
HTML是Hyper Text Markup Language的缩写。意思是『超文本标记语言』。
二、HTML的文件结构
1.文档类型声明
HTML文件中的第一行内容,用来告诉浏览器当前HTML文档的基本信息,其中最重要的就是当前文档遵循的语法标准。
我们只需要知道HTML有 4 和 5 两个版本就可以 :
HTML4版本的文档声明是:
<!DOCTYPE HTML PUBLTC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5版本的文档声明是:
<!DOCTYPE html>
现在主流的技术都是使用HTML5,之前的版本基本不再使用
历史上HTML的各个版本:
| 版本名称 | 年份 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML2.0 | 1995 |
| HTML3.2 | 1997 |
| HTML4.01 | 1999 |
| XHTML1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
2.根标签
html标签是整个文档的根标签,所有其他标签都要放在html标签里 , 但是文档类型标签不能当做普通标签看待.
<html>
<!--普通标签都要放在这里面-->
</html>3.头部标签
用于定义文档的头部,其他头部元素都放在head标签里
头部元素包括:
title标签 , script标签 , style标签 , link标签 , meta标签等
4.主体标签
body标签定义网页的主体内容 , 在浏览器窗口内显示的内容都定义到body标签里
5.注释标签
注释的内容不会显示到浏览器窗口内,是开发人员对代码内容进行解释说明
<!-- 注释内容 -->6.HTML5文档基本模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>7.HTML语法规则
- 根标签有且只能有一个
- 无论双标签还是单标签都必须正确关闭
- 标签可以嵌套但不能交叉嵌套
- 注释不能嵌套
- 属性必须有值,值必须加引号
- 标签名不区分大小写,但建议小写
三.HTML一些普通标签
1.段落标签
p标签 , 独占一行上下各隔开一行
<p>
这是一段话
</p>2.标题标签
一共有六级标签
<h1>
标题一
</h1>3.图片标签
img标签,是一个单标签
图片标签常用的标签属性
src="图片路径"
width="" 设置图片宽度
height="" 设置图片高度
实际开发中:width 和 height 只需要设置一个即可，会自动按比例缩放
title="鼠标放到图片上面显示的文字"
alt="" 图片占位文字，定义图像的简短描述
<body>
<!--图片标签 img -->
<img src="图片路径" width=" " title="文字">
</body>4.超链接标签
<a href="链接地址" target="">名字</a>超链接是当前标签关联一个链接地址，点击可以实现网页跳转目标网页未访问过文字是蓝色，访问过之后文字变为紫色
属性介绍 :
href属性:负责存放链接地址
target属性:(跳转的目标网站 默认是在当前标签页打开)
- _self(默认值，默认在当前页面打开)
- _blank(在新标签页打开)
a标签的四大功能 :
- 跳转功能
href="目标网址"
- 回到页面顶部
<a href="#">点我回到页面顶部</a>
- 锚点功能
跳转到目标网页的指定位置(默认跳到目标网页的顶部)
目标网页在想要被跳转的位置的标签加上id
<a href="目标网页.html#id名">超链接名</a>
当前网页的指定位置:
<a href="#id名">超连接名</a>
- 文件下载功能(不推荐使用 因为无法防盗链)
若href关联的地址是一个浏览器可预览的格式，那么会在线打开预览
可预览的格式:txt jpg png mp4 ...
若无法预览则提示下载
不可预览格式:zip 7z 等压缩包格式
base标签 : 与a标签配合使用
<base href="" target="">
<a href="" target="">超链接名</a>作用:对所有后来的a标签进行统一设置
href 表示基础路径的统一配置
a标签最终跳转地址 = base标签的href地址 + a标签本身的href
若a标签的href地址里没有协议开头，那么会找base标签的href进行拼接地址;若a标签没有协议开头，则不再找base标签
targrt属性:
若a标签未设置target属性，则按照base的target属性
若a标签设置了，则按照当前a标签的target属性
5.列表标签
无序列表(ul标签)
<ul>
<li></li>
<li></li>
<li></li>
</ul>常用属性:
ul标签常用属性:
type:修改序号的样式
disc(默认值):实心小圆圈
spuare:实心小方块
circle:空心圆圈
有序列表(ol标签)
<ol>
<li></li>
<li></li>
<li></li>
</ol>ol标签常用的属性:
type:修改序号的类型
1(默认值)、a、A、i、I
start="数字"
1(默认值) , 表示从该数字开始排序
自定义标签(dl标签)
表示自定义列表标签
dl dt dd标签做图文混排操作
例如商品列表、商品描述
6.表格标签
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>table标签 :
table标签是最外层标签
tr表示一行
th表示表头
td表示单元格
table的几个标签属性 :
border="边框线宽度" 默认没有边框线
width="表格宽度"
height="表格高度"
cellspacing="单元格之间的间距"
cellpadding="单元格内文字到格子的距离(填充)"
如果border设置成50 , 意思是模拟阳光从左上角照射的效果
tr的常用属性 :
align=" ";当前行文本的横向对齐方式
可能的值:center 表示表格在页面居中对齐
left 左对齐
right 右对齐
四.表单标签
form标签
属性:
action=" "; 填写服务器的地址
method=" "; 表示提交方式
目前大概只需了解,常用的方式 get 和 post,默认是get
get提交方式:
默认就是在地址栏,通过 ? 拼接键值对的方式提交数据给服务器
地址?username=zs&password=123 键值对
input输入框标签
普通输入框<input type="text>输入框的常用属性:
readonly:表示只读,输入框内容不可修改
value=" ";表示输入框默认的输入内容
placeholder=""表示输入框的占位提示文字
disabled;表示禁用输入框,不会被提交
密码输入框<input type="password">单选按钮<input type="radio" name="" value="">多个单选按钮要实现单选功能,name属性的值是一样的
单选按钮必须要定义value属性,来定义选中的值
多选按钮<input type="checkbox">value属性是用来被提交的值,哪个被选中则提交哪个
下拉框标签
<select name="">
<option value="">下拉框1</option>
<option value="">下拉框2</option>
<option value="">下拉框3</option>
</select>
name属性写在select标签 value属性写在option标签
普通按钮<input type="button" name="自己起的名字">提交按钮<input type="submit" name="自己起得名字">重置按钮<input type="reset" name="自己起得名字">总结
以上是今天html的笔记内容 , 剩余部分还会继续补充.
如有错误 , 还希望各位大佬指正错误
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
