HTML部分
1. 网站等基本知识
- 网站是指在因特网上根据一定规则 使用html等制作的用于展示特定内容相关的网页集合
- 网页通常是HTML格式的文件 构成网站的基本元素 通常由图片 链接 文字 声音 视频等元素组成 俗称HTML文件
- HTML 指 超文本标记语言（用来描述网页的一种语言） 是标记语言（markup language）是一套标记标签
- 为什么叫超文本呢 1. 超越文本限制（图片 声音 视频） 2. 可以跳转（报纸不行把）
- 代码通过浏览器渲染 成 用户看到的美丽理塘
- 浏览器内核（渲染引擎） 就是他把HTML文件 渲染出来的ba
- web标准由结构 表现 行为 构成； 提出 结构 样式 行为相分离（写到不同的文件中）
- 结构类似鸟的身体 表现类似彩色的羽毛 行为 起飞
2. html签签
或许是常识
- HTML标签左右两个 <>(中间那个/ 就先记住把) 好像那个双面陀螺（转死你）
- HTML单身的人很少（指单表签少） 双标签有开始标签和结束标签
- 双标签才有关系（单标签没有子嗣罢了（那兄弟总有罢）） 分包含关系（父子） 和 并列关系（兄弟）
<!-- 包含关系 -->
<head>
<title> </title>
</head>
<!-- 并列关系 -->
<head></head>
<body></body>
骨架标签（基本结构标签 或许是离不开他把）
<!-- html标签 浏览器中最大的标签 又叫根标签♂ -->
<html>
<!-- 我来组成头部！！！ 人家必须要title来陪呢 -->
<head>
<!-- 能显示在上面那里（对 就是那里） -->
<title>朝巴才学前端</title>
</head>
<!-- 包含文档所有内容 页面内容基本都放到body里面 -->
<body>
找0 <br>
<!-- 关于有没有/ mayouli也是很困惑呢（懒得查！la） -->
111111111111111111111111111111101111
</body>
</html>
master 要知道 <head> 和 <body> 对于看到页面哪一部分啊
你说的对，但是《vscode》是由……研发的一款全新开放世界冒险游戏。
- 记得使用前 先保存成html格式的文件哦 CT
- 一些快捷键
- ！(生成骨架结构 好像是要英文的)
- 唱跳rap篮球 + / 注释
- 安上挂件会更好van哦（比如右键会有open in default browser）
<!-- 文档类型声明标签（不属于html标签 甚至位于其上） 告诉你用的html哪个版本 他说的是html5 -->
<!DOCTYPE html>
<!-- lang en表示英语 zh-CN 中文 说明中文网页 对浏览器（比如翻译那个）和搜素引擎有用 -->
<!-- 中文网页中有英文很合理把 比较大家都用utf-8 -->
<html lang="en">
<head>
<!-- 好像很重要 会乱码 head标签内通过<meta>标签 charset属性来规定html文件使用那种字符编码 UTF-8不用多说了 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
还是看看远处的标签ba
-
寄巧是记住含义
-
标题标签
- <h1>~<h6> 只有六个
- 更大 更粗
- 独占一行
-
段落标签
- 会随窗口大小而移动
- 会和上下有空隙(和word好像有点像)
-
换行标签
- 如果没有不会自动换行 直到塞不下了 才会(你敲源码时 按了enter 不行哦 md也是这样)
- <br> 单标签
- 不会加垂直间距
-
到现在好像 可以做出来报纸上面的效果了 可以做新闻的案例
字
- 加粗 <strong> </strong>
- 倾斜 <em> </em>
- 删除线 <del> /<del>
- 下划线 <ins> </ins>
md居然内嵌html
更niubi的标签
-
div 和 span 都是盒子 用来装内容 布局(可能更整齐?)
-
div 大盒子 一行只能一个 span 小盒子 一行可以多个(后期好像很重要)
-
图像标签
<!-- 是个单标签 --> <img src="图像URL">- src是img标签的必要属性 指定图像文件的路径和文件名
- 其他属性
- alt 替换文本 不能显示时他出来
- title 提示文本 鼠标放图片上 会显示
- width 设置宽度
- height 设置高度 这两个只设置一个 会等比例缩放
- border 设置边框粗细
- 可以有多个属性 但要写在标签名后面
- 属性 不分顺序 但要 以空格为间隔
- 属性采用键值对的格式
- 路径
- 相对路径 : 以引用文件所在位置为参考 而建立出来的目录路径
- 上一级../logo.png
- 绝对路径 : 从盘符开始的路径
- 相对路径 : 以引用文件所在位置为参考 而建立出来的目录路径
-
超链接标签
- 用a(anchor锚)标签
- 属性
- href 是必要属性 指定链接目标的url地址
- target 指定链接页面打开方式 其中_self 是默认值(当前窗口) _blank为在新窗口中打开方式
- 链接分类
<h4 id="1">1. 外部链接</h4> <a href="http://www.qq.com" target="_blank">腾讯438</a> <h4>2. 内部链接</h4> <!-- 网站内部页面之间的相互链接 --> <a href="gongsijianjie.html">公司简介</a> <h4>3. 空链接</h4> <!-- 感觉不加# 也可以啊 --> <a href="#">公司地址</a> <h4>4. 下载链接</h4> <a href="logo.zip">下载压缩包</a> <h4>5. 网页元素的链接(其实是点他就能跳(比如文本(之前就是把)图片)</h4> <a href="https://bilibili.com"><img src="logo.png" alt="1" title="这是我和六花的logo"></a> <h4>6. 锚点链接</h4> <!-- 可以快速定位到页面中的某个位置 --> <!-- 1. 在href属性中 设置值为# + id属性的值 --> <!-- 2. 在目标位置标签里 添加一个id属性 --> <a href="#1">到外部链接那里</a> <!-- 空连接也能回到顶部 --> -
注释标签不显示到页面中 写法如上
-
特殊字符 一些特殊符号 很难或者不方便直接使用 可用下面字符代替
-
- 空格 & nbsp;
- 大于号 & lt;
- 小于号 & gt;
- 平方 & sup2; 立方 sup3;
- 版权 & copy;