相信会看到我这篇文章的你,对前端开发已经有所了解,相关的概念我就不赘述了。
准备工作
安装软件
- visual studio code编辑器
- 扩展插件下载(下图)
- Chinese
- open in browser
- 扩展插件下载(下图)
- Chrome 浏览器
HTML 简介
- 超文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言;
- 标记语言是一套标记标签 ,HTML 使用标记标签来描述网页 。
HTML的文件命名: 小写字母开头,后可接下划线、数字、字母,不可使用中文或特殊字符作为文件名。
创建简单站点
用来归纳一个网站上所有的网页、素材以及他们之间的联系
目录结构
|-- site文件夹
|-- html文件夹
|-- css文件夹
|-- js文件夹
|-- imgs文件夹
|-- index.html(首页)
注意事项:首页必须命名为index.html,其他页面写在html文件夹里。
文件的命名规则
- 必须以小写英文字母开头 (可以包括小写英文,数字、下划线)
- 其中不得包含汉字、空格和特殊字符
HTML 基本结构
快速生成html基本结构快捷键: html:5+tab键。生成后如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
这里写页面代码
</body>
</html>
HTML 基本语法
-
HTML 标签
- HTML 标签是由
尖括号包围的关键词
,比如<HTML>
- HTML 标签通常是成对出现的,比如 和 。第一个是开始标签,第二个是结束标签
- HTML 也存在单标签,例如、
- HTML 标签是由
-
HTML 元素
- 由一对双标签或者一个单标签组成
-
HTML 属性
- 由【HTML 属性="属性值"】组成,多个属性(或属性值)之间用空格隔开。
- HTML 属性写在标签名后面,用空格隔开。
-
HTML 注释
- 方便理解,备注一些重要的信息。快捷键:ctrl+?
- 格式:
<!-- 这是HTML的注释,你在页面上看不到我 -->
扩展:书写 HTML 代码快捷键
- html:5 + tab 生成页面结构
- 标签名字+tab 生成一对标签
- ctrl+c 复制 ctrl+x 剪切 ctrl+v 黏贴
- ctrl+z 返回上一步 ctrl+y 返回下一步
- ctrl+s 保存
- ctrl+?注释
扩展:打开浏览器的控制台
- 方式1: f12 - elements - 点击你想看的元素
- 方式2: 找到页面的指定元素 - 右键 - 检查
HTML 常用标签
标题 h1,h2,h3,h4,h5,h6
作用:把页面上的文字加上标题的语义,其中 h1 定义标题的语义化最重;
注意:一个页面只能有一个 h1 标签。
<h1>淘宝网</h1>
<h2>主题市场</h2>
<h3>女装</h3>
<h4>羽绒服</h4>
<h5>轻羽绒服</h5>
<h6>短款轻羽绒服</h6>
段落 <p>这是段落</p>
作用:给页面的上一段文字加上段落的语义
换行 <br/>
作用:换行。
列表标签
- 无序列表
作用:显示一列没有排列顺序的数据。
<!-- 无序列表ul(unordered list)> li列表项(list item)。-->
<ul>
<li>本子</li>
<li>便利贴</li>
<li>笔</li>
</ul>
- 有序列表
作用:显示一段有顺序的数据。
<!-- 有序列表ol(ordered list)> li 列表项 -->
<ol>
<li>小苹果</li>
<li>最炫民族风</li>
<li>荷塘月色</li>
</ol>
- 自定义列表
作用:显示一段数据,格式自己定义
<!-- 自定义列表dl(definition list)> dt 自定义列表项 + dd 对自定义列表项的描述-->
<dl>
<dt>做饭食材</dt>
<dd>白菜</dd>
<dd>南瓜</dd>
<dd>猪肉</dd>
<dt>生活用品</dt>
<dd>牙签</dd>
<dd>牙膏</dd>
<dd>牙刷</dd>
</dl>
注意: ul、ol 标签是用来管理 li 标签,所以 ul、ol 中只能出现 li。(同理:dl 只能有 dt、dd)
图片 <img/>
作用:在页面显示一张图片。
<!-- 属性: -->
<!-- [src] : 引入图片的路径 (../ 返回上一级目录)-->
<!-- [alt] : 图片无法正常显示时,出现的文字 -->
<!-- [title] : 鼠标悬停在图片上,出现的文字 -->
<img src="images/6.jpg" alt="我要装逼了,快醒醒" />
<img src="7.jpg" title="熊本熊表情包"/>
锚链接 <a></a>
作用:跳转页面。
属性 | 属性值 |
---|---|
href | a 标签的跳转目标地址 |
target | 设置连接的跳转方式:_blank:保留原始页面,再进行跳转_self:在当前页面进行跳转 |
补充:为页面上所有 a 标签设置跳转方式(一般放在 titile 标签下面)
扩展
-
可以在当前页面进行定位
- 在页面的指定位置加入一个任意标签,给这个标签设置一个id名;
- 设置a标签的href属性为“#id名”。
-
在跳转的页面进行定位
表格
早期网站开发中,人们喜欢作用表格布局,使用非常的泛滥。到了 2008 年之后,人们意识到表格的局限性,所以改为用 div+css 模式。【2002.Sina.com.cn、2004.sina.com.cn】
作用:用来将数据以表格形式显示出来。
标签 | 定义 |
---|---|
table | 定义表格 |
caption | 定义表格标题 |
thead | 定义表格的页眉 |
tbody | 定义表格的主体 |
tfoot | 定义表格的页脚 |
tr | 定义表格的行 |
th | 定义表格列标题 |
td | 定义表格单元 |
<table>
<caption>花名册</caption>
<thead>
<tr>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tfoot>
<tr>
<td>这是新生花名册</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>小绿</td>
<td>睡觉</td>
</tr>
</tbody>
</table>
常用属性 | 作用 |
---|---|
border | 给表格加上了边框 |
width | 表格宽度 |
height | 表格高度 |
cellspacing | 单元格与单元格之间的间距 |
cellpadding | 单元格的内填充,单元格边框与内容的间隙 |
rowspan | 单元格占多行 |
colspan | 单元格占多列 |
表单
作用:用来收集用户的信息,将来提交到服务器。
表单相关标签及属性
标签 | 属性 | 属性值+作用 | |
---|---|---|---|
form 表单 | action | 提交到的后台地址 | |
method | 提交的方式 | ||
name | 表单名字 | ||
input | type | text文本框、password密码框、button普通按钮、reset重置按钮、radio单选框、checkbox多选框、file上传文件、submit提交按钮、image图片提交按钮 | |
value | 给表单控件添加默认内容 | ||
placeholder | (输入框)占位符提示 | ||
autofocus | (输入框)自动聚焦 | ||
pattern | (输入框)正则校验 | ||
checked | (单选框、多选框)设置默认选中的值 | ||
multiple | (type="file")上传多个文件 | ||
select 下拉列表 | name | 表单控件名字 | |
option 下列列表选项 | value | 选项值 | |
selected | 设置下列列表默认选中该选项 | ||
textarea 文本域 | name | 表单控件名字 | |
cols | 列数 | ||
rows | 行数 |
<!-- 表单form>表单控件input+(下拉列表select>选项option[value])+文本域textarea[cols列][rows行]
form:
[action]提交到的后台地址
[method]提交的方式 (get、post)
[name]表单名字
input:
[type]表单控件的类型(text文本框、password密码框、submit提交按钮、button普通按钮、reset重置按钮、radio单选框、checkbox多选框、file上传文件)
[name] 若该表单控件内容需要提交,则加上该属性。同一组单选框或多选框需要添加相同的名字
[value] 给表单控件添加内容
-->
<form action="#" method="get" name="login">
<input type="text" name="yonghuming" value="诸葛亮"/> <br />
<input type="password" name="mima"/> <br />
<input type="radio" name="menpai"/>龙宫 <input type="radio" name="menpai"/>大唐官府
<br />
<input type="radio" name="gender"/>男 <input type="radio" name="gender"/>女
<br />
<input type="checkbox" name="hobby"/>大保健
<input type="checkbox" name="hobby"/>睡觉
<input type="checkbox" name="hobby"/>学习
<br />
<input type="submit" value="登录"/><br />
<input type="button" value="没用的东西"/><br />
<input type="reset"/><br />
<select name="city">
<option value="广州">广州</option>
<option value="深圳" selected>深圳</option>
<option value="张家界">张家界</option>
</select>
<textarea name="Qzone" cols="15" rows="15">留下你想说的话吧!</textarea>
</form>
表单控件的共有属性
-
name 给表单控件添加名字。
- 若该表单控件内容需要提交,则加上该属性。
- 同一组单选框或多选框需要添加相同的name值
-
disabled 表单控件禁用
-
required 验证条件,必填项
更多表单相关标签
标签 | 作用 |
---|---|
fieldset | 表单字段集,用于对表单中的元素进行分组。[disabled]属性定义空间禁止使用 |
legend | 字段集标题。legend元素必须是fieldset内的第一个元素。 |
label | 提示信息标签。[for]属性关联表单控件的[name]属性 |
<form action="#">
<fieldset>
<legend>注册</legend>
<!-- label提示信息标签 for为了谁-->
<label for="uname">用户名</label>
<input type="text" value="请输入用户名" id="uname"/>
<br />
爱好:
<label><input type="checkbox" name="hobby"/>吃零食</label>
<label><input type="checkbox" name="hobby"/>玩游戏</label>
</fieldset>
</form>
视频 <video></video>
定义视频,比如电影片段或其他视频流
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
属性 | 描述 |
---|---|
src | 要播放的视频的 URL。 |
autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
width | 设置视频播放器的宽度。 |
height | 设置视频播放器的高度。 |
loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | 规定视频的音频输出应该被静音。 |
poster | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 |
preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 |
音频 <audio></audio>
www.w3school.com.cn/tags/tag_au…
块级元素<div></div>
特点:(1)宽度默认占一整行 (2)可以设置宽高
例:body、h1-h6、p、列表
行内元素<span></span>
特点:(1)宽高由内容决定(不能设置宽高) (2)一行显示多个
例:input、select、a、img