2.HTML学习
声明：不完整，就是学了做着玩玩的
1.基础模板
<!DOCTYPE HTML> //声明html语言和版本
<html>
<!--头部-->
<head>
<meta charset="utf-8">
<tittle>这是一个标题</tittle>
</head>
<!--内容-->
<body>
<h1>第1级标题（共可设6级标题）</h1>
<p>段落</p>
<!--这是一个链接-->
<a href = "www.baidu.com">这是一个链接</a>
<!--这是一张图片-->
<img ……>
</body>
</html>
2.一些知识点（不重要）
- 换行：
<br/>
换行与段落的区别，段落会产生一段额外的垂直距离
<br/>中的/表示自封
- 水平线：
<hr/>
3.文本格式化（不重要）
加粗：<b> 斜体：<i>
电脑自动输出：<code>(代码)</code>
上标：sup 和 下标：sub
4.链接
- HTML使用<a>中的href属性来添加链接,即:
<a href="url">链接文本</a>
<!--子文件夹最好加上/，否则访问时会自动加上/,致使产生两次请求-->
(？但是只打开了一个页面？)
- 定义id
<a id="……">文本</a>
类似类的调用，里边内容填前面定义好的类名,
类名被id调用后，不能再被调用.
当多个定义语句同时出现时，权重：
inline(不引用，直接写)>id>class>type(整体一起定义的,如定义4级标题是蓝色)
5.<head>头部标签
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为:<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>
- <tittle>:
<tittle>抬头名</tittle>
即抬头，这个页面的名字。 - <base>:
< href="url" target="_blank">
设置默认的地址链接,后半部分表示链接会在一个新页面打开。
6.列表和表格
- 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
- 有序列表
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
- 表格
table分为标题和内容
<table>
<thead>
<tr>
<th>号码</th>
</tr>
</thead>
<tbody>
<tr>
<th>123</th>
</tr>
</body>
</table>
结果如下：
| 号码 |
|---|
| 123 |
7.表单
外格式需要用:
<form>……</form>嵌套
<!--小框-->
<label>标签1</label>
<input type="text">
或者
<!--大框-->
<label>标签2</label>
<textarea></textarea>
或者
<!--选择框-->
<label>性别</label>
<select>
<option value="male">男</option>
<option value="female">女</option>
<option value="other">其他<option>
</select>
结果如下：
- 表单默认为横排列，若是向竖着排列，可在外加：
<div>……</div>
8.按钮和图片
<button>这是一个按钮</button>
结果如下：
<img src="url" alt="这是一张图片" width="100" height="100">
示例如下：
(应该加载不出来，出来了就🐂了大🍺)
- src是图片的来源
- alt是图片加载不出来显示的文字
- width和height可以强制缩放比例
9.音频和视频
- 音频
<audio src="xxx" controls > xxx </audio>
<!--可添加属性 autoplay(自动播放)、loop(循环播放)-->
示例如下：
- 视频
<video src="xxx" controls > xxx </video>
<!--同上 -->
10.语义化标签
<header>网页头部
<main>网页核心
<aside>广告
<article>文章
<section>类似<div>分块，但语义比<div>大
<footer>页脚
目前来说，<div> 仍然是区块划分的主要标签,是包裹文字的主要标签
11.三种css引入方式
- 内联
即：
<head>
……
<style>
.a{
background-color:black;
font-size:22px;
……
}
</style>
</head>
- 外联
新建一个CSS文件，将style里的内容写到css中
链接该文件：
<link rel="stylesheet" href="地址">
或者这样链接：``
12.选择器类型
-
标签(元素)选择器
如：p{ } div{ } span{ } 这类将统一标签的样式
-
id选择器：#id属性名
如：#abc{ },引用的时候可用id=abc，只能被使用一次
-
class选择器：.class属性名
如：.abc{ },引用的时候可用class=abc，可重复使用
若是想引用多个类，可如：
-
通配符选择器：*{ }
即选中页面所有标签
浙公网安备 33010602011771号