HTML基础知识及相关概念
<!DOCTYPE html>
<!-- 标记这是一个html5文档 -->
<html lang="en">
<!-- 说明这个html文件的主要语言是英文。lang="zh-cn" 为主要语言是中文-->
<head>
<!-- 头部 内容无需用户关注,主要为开发者设计的为浏览器解析需要的标记标签 -->
<meta charset="UTF-8" />
<!-- 设定当前使用的字符集 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 设定可视屏幕宽度 其中device指的是设备宽度,initial-scale=1.0,不允许缩放,按1:1显示,无法自适应,适合pc端 -->
<title>Document</title>
<!-- 当前页面的标题 -->
<script type="text/javascript">
// 运行go函数后,在id=title1的标签中显示内容
function go() {
document.getElementById(“title1”).innerHTML = “能阻挡你的只有自己!”;
}
</script>
</head>
<!-- 头部内容结束标签 -->
<body>
<!-- body标签,页面内容容器 -->
<h2 style="color:green" ondblclick="go()">
<!-- 标签是页面元素,属性是对元素的描述,值是属性的结果 -->
这是4月2日课程的HTML基础知识示例
</h2>
<p id="title1"></p>
<!-- 这里显示js函数运行结果 -->
<form method="get" action="1.php">
<!-- 注意标签的层级关系和嵌套 -->
<p>hello world!</p>
<!-- 非空元素,一般为双标签 -->
<a href="https://www.baidu.com">跳转至百度</a>
name:<input type="text" name="name" />
<!-- 空元素,一般使用单标签,内容来自对外部文件或资源的引用,如音频,视频,图片等 -->
<button type="button">提交</button>
</form>
</body>
<!-- 页面内容结束 -->
</html>
<!-- 文档结束标签 -->
1、HTML的设计思想
1.1 页面中看到的所有内容都是元素;
1.2 元素都在标签之中;
1.3 html是超文本(包含超链接的文本)标记语言;
1.4 html语言中几乎所有元素都具有的三大通用属性:
ID属性+Class属性+style属性
元素种类 | 标签特点 |
---|---|
非空元素 | 双标签 |
空元素 | 单标签 |
属性值类型 | 特点 |
---|---|
预定义 | 只能选择值 |
字符串 | 可以自定义 |
指定格式 | 固定写法格式,如url值 |
数值类型 | 可视为某种指定格式类型 |
布尔值 | 除非不写该属性,定义了该属性即默认为真 |
2、HTML的页面结构和布局
元素有默认样式和自定义样式。
自定义样式的优先级高于默认样式。
样式重置:通过重置,实现在所有浏览器中输出的统一
3、HTML的其他相关知识
3.1 网页中的文本/实体字符,可查手册获得。用于html解析输出;
3.2 html语言中大小写不敏感。但通过外部输入提交至数据库中的内容需小心,可能存在大小写敏感问题;
3.3 html中文件名推荐使用连接线,如涉及将标签内容向数据库中提交,需要使用下划线。如name标签、id标签、labe标签等。
3.4 url:互联网统一资源定位符
如:https://www.php.cn/code/33345.html
其中https指web协议,默认端口80
ftp:// 指ftp协议 ,默认端口21
www.php.cn:主机名/域名 是ip地址语意化的表示
/code/33345.html 是访问资源在服务器上的真实位置