博客列表 >Lesson 2. HTML基础知识笔记及内容回顾

Lesson 2. HTML基础知识笔记及内容回顾

杜波
杜波原创
2020年04月03日 16:59:50448浏览

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 是访问资源在服务器上的真实位置

上一条:HTML小结下一条:4.2学习总结
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议