html 基础入门
html 基础入门
HTML 网页结构
白色是我们能看到的部分，灰色是看不到的部分
title 就是我们打开网页时，最上面浏览器窗口栏显示的名字
标签与元素
像上图中的:
- html
- head
- title
- body
- h1
- p
这些都是标签, 像这样的标签有很多: HTML 参考手册- (HTML5 标准)
而HTML元素是指一个具体的标签实例, 比如下面有2个HTML元素，都是h标签
<h1>这是一个标题</h1>
<h1>这是另一个标题</h1>
而整个网页也就是是由这些标签组成的HTML元素嵌套组成
class
我们给页面的h添加class，那么我们就可以基于class的名字去操作
<html>
<head>
<title>
html index
</title>
<style>
/* 为cls1的class，设置字体大小 */
.cls2 {
font-size:12px;
}
</style>
</head>
<body>
<!-- 添加class，根据class调整字体 -->
<h1 id="instance1" class="cls1 cls2">
主题：小鲤鱼1
</h1>
<a>
从前有一条鱼
</a>
<h1 id="instance1" class="cls1 cls3">
主题：小狗鱼1
</h1>
<a>
从前有一条狗
</a>
</body>
</html>
根据classname，把主题：小鲤鱼改成主题：小小鱼
元素语法
<tag att1=v1 attr2=v2>内容</tag>
每种标签都有自己的一组属性, 属性分为2类:
全局属性: 所有标签都有的属性
- id 定义元素的唯一id
- class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
- style 规定元素的行内样式（inline style）
- title 描述了元素的额外信息 (作为工具条使用)
- 更多属性请参考: HTML 全局属性 https://www.runoob.com/tags/ref-standardattributes.html
- 标签属性: 每种标签肯能还有一些该标签才特有的一些属性
- href 需要有引用的属性的标签才有这个属性, 比如 链接(a标签) 和 图片(img标签)
常用标签
基础标签:
<h1> to <h6> 定义 HTML 标题
<p> 定义一个段落
<br> 定义简单的折行。
<hr> 定义水平线。
<!--...--> 定义一个注释
文本标签:
del 定义被删除文本。
i 定义斜体文本
ins 定义被插入文本
sub 下标文字
sup 上标文字
u 下划线文本
表单标签:
form
input
...
常见元素:
iframe 嵌套外部网页
img 展示图像
area 标签定义图像映射内部的区域: https://www.runoob.com/try/try.php?filename=tryhtml_areamap
a 链接标签
ul 定义一个无序列表
ol 定义一个有序列表
li 定义一个列表项
表格:
table 标签定义 HTML 表格, 一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
tr 元素定义表格行，
th 元素定义表头，
td 元素定义表格单元
容器元素
div 标签定义 HTML 文档中的一个分隔区块或者一个区域部分, 标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化
span 用于对文档中的行内元素进行组合 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式
元素id
标识该元素的唯一身份, 并且可以在其他地方引用
比如，通过a标题跳转到指定的位置:
<p>
<a href="#C4">查看章节 4</a>
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
id 也是js操作元素的重要依据之一:
document.getElementById('C4')
<a id="C4">章节 4</a>
案例
<html>
<head>
<title>
html index
</title>
</head>
<body>
<h1 id="instance1">
主题：小鲤鱼1
</h1>
<a>
从前有一条鱼
</a>
<h1 id="instance1">
主题：小狗鱼1
</h1>
<a>
从前有一条狗
</a>
</body>
</html>
在元素里可以看到id
通过控制台可以通过document查找对应元素
style 元素的样式
通过元素的style属性可以控制该元素的样式
比如我们可以把p元素里面的这段话的字体加大, 演示改为红色
<p style="color:red;font-size:20px;">这边显示该章节的内容……</p>
语法的格式: key: value; 分号分开的就是一个样式条目, 我们可以为一个元素添加很多样式
再比如控制元素的宽和高
<iframe src="//www.runoob.com" sytle="height: 200px;width: 400px;">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
一个元素的样式属性是有很多的 我们到css时再讲解
脚本
有了元素和样式，我们的页面还是一个静态页面, 比如页面加载完成后，我要动态修改里面的元素这么办?, 这就需要用到我们前面学的js脚本了
<script> 标签用于定义客户端脚本，比如 JavaScript
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件
比如下面:
// 通过src 网络引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
// 通过本地文件引入
<script>
import axios from 'axios';
</script>
JavaScript 最常用于图片操作、表单验证以及内容动态更新
<script>
c4 = document.getElementById('C4')
// <a id="C4">章节 4</a>
c4.innerText
// '章节 4'
c4.innerText = '章节 5'
// '章节 5'
</script>
