HTML是超文本标记语言(HyperText Markup Language)的缩写,是一种用于创建网页的标准标记语言。而CSS则是对网页进行下一步的美化,两者相辅相成,才能创建一个完美的网页。
对于有一定编程基础的人来说,这门语言相对简单,但是其中知识点繁多,有人望而却步;有人学过也已经忘得差不多了。希望接下来的系列文章能够帮助你更好了解HTML和CSS或者巩固已学知识
目录
此篇文章到此结束,大家自己也试着找个网页练练手吧!代码无情,人间有情,欢迎大家点赞评论加收藏。内容如有问题还请大家在评论区指点一二。
1.标签语法
HTML通过各种标签标记语言,实现不同功能。
(1)双标签:开头结尾成对出现,且后者比前面多加“/”,<开始标签>内容<结束标签>。eg:
<strong>加粗</strong>
ps:对文字内容施行标签所代表的功能
(2)单标签:只有开头无结尾。eg:
<br>换行
<hr>水平线
2.结构骨架——!+enter自动生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<html>整个网页</html>
<head>头(存给浏览器)</head>
<title>标题</title>
<body>主体</body>
3.关系
- 父子关系(非对齐):Tab——空格。eg:上图中head和title的关系
- 兄弟关系(对齐):Shift Tab——取消空格。eg:上图中head和body的关系
4.注释
<!-- 注释内容 -->
快捷键:Ctrl+/——删除/添加
5.标题
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
6.段落标签
<p>段落</p>
7.文本格式化
strong | 加粗 | b |
em | 倾斜 | i |
ins | 下划线 | u |
del | 删除线 | s |
8.图像
<img src="图片的URTL" alt="替换文本(图片无法显示则显示文字)" title="提示文本(鼠标悬停时显文字)">
属性值:height/weight:图片大小
9.路径——起->终路线(相对/绝对)
(1)相对
- /:表示某个文件夹内
- ./:表示当前文件夹内
- ../:表示上一个文件夹内
(2)绝对
- 自己电脑:上述方法复制地址
- 别人:复制图片地址
10.超链接
<a href="链接地址"></a>
<a href="#" target="_blank">文字内容</a>
<!-- #:空链接target="_blank":自动生成新建页 -->
11.音频
<audio src="音频的UTRL"></audio>
属性值 | 效果 |
controls | 显示面板 |
loop | 循环 |
autoplay | 自动 |
12.视频
<video src="视频的URTL"></video>
属性值 | 效果 |
controls | 显示面板 |
loop | 循环 |
muted | 静音 |
autoplay(muted前提下) | 自动 |
13.列表
- 无序(文章当前部分即为无序效果)
<ul>
<li>···</li>
<li>···</li>
</ul>
- 有序
<ol>
<li><a href="#">kbkj</a></li>
<li><a href="#">xnx</a></li>
</ol>
- 定义
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>
14.表格
<table border="1">
<!-- border="1"是框的边距,可以去掉 -->
<tr>
<th>表头</th>
</tr>
<!-- 第一行 -->
<tr>
<td>张三</td>
</tr>
<!-- 第二行 -->
<tr>
...
</tr>
<!-- 第三行 -->
</table>
优化方法
-
thead:头
-
tbody:内容
- tfoot:尾
15.合并单元格
属性 | 效果 |
rowspan | 垂直合并 |
colspan | 水平合并 |
ps:以上均为<td>标签的属性,如下例子:
<table border="1">
<tr>
<td colspan="2" rowspan="2">合并的单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<!-- 这里的单元格因为上面的rowspan和colspan被合并,所以不会显示 -->
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
16.表单
(1)input标签
<input type="属性值">
属性值 | 效果 |
text | 文本 |
passward | 密码 |
radio | 单选 |
checkbox | 多选 |
file | 文件上传 |
(2)占位文本——提示
<input type="属性值" placeholder="提示">
(3)单选框:radio
name:分组(同组只选一个)
ps:默认选一个时,在此选择中属性加checked,多选同理
(4)file中文件多选
<input type="file" multiple>
17.下拉菜单
<select>
<option>内容</option>
<option>内容</option>
<option selected>内容</option>
</select>
<!--selected:默认选中 -->
场景:注册界面选取自己所在城市
18.文本域——形成文本框
<textarea>···</textarea>
19.label(包裹内容,该内容也可以被选择)
<label><input type="radio" name="gender">男</label>
属性值和input相同
20.按钮
<button type="属性值">文字内容</button>
20属性值 | 效果 |
submit | 提交 |
reset | 重置 |
button | 普通按钮 |
拓展
div:换一行
<div>...</div>
span:不换行,空一格
<span>...</span>
空格: 
<:<
>:>