| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> 开发工具 -> h5(html5)css3入门学习笔记 -> 正文阅读 |
|
[开发工具]h5(html5)css3入门学习笔记 |
萌新入门,做听课笔记,学的是黑马程序员pink老师的视频,可以去b站搜 一.语法规范 1.标签写在尖括号里"<>",例如<html>. 2.标签一般都为双标签(单标签很少)例如: ??????? <html></html>.第一个是开始标签,第二个是结束标签. ??????? 单标签:<br/> 3.标签的关系,存在包含关系和并列关系
并列关系例:
二.基本结构标签(骨架标签)
三.vscode工具生成骨架标签新增代码(一定要写):
1.!DOCTYPE标签 (1)文档类型声明,位于<html>标签之前,告诉浏览器采取html5版本来显示页面 (2)<!DOCTYPE>不是HTML标签,它就是文档类型声明标签 2.lang语言?? <html lang="en"> 语言类型: (1)en定义为英文 (2)zh-CN为中文 3.charset字符集?? <meta charset="UTF-8"> UTF-8为万国码,基本包含了全世界所以国家要用到的字符(不写可能乱码) 四.常用标签 1.标题标签 (1)分为6个等级,<h1>-<h6>
(2)双标签,作为标题使用,依据重要性递减 (3)加了标签文字会变粗,字体依次变大,独占一行 2.段落标签
(1)文本在一个段落中会根据浏览器窗口大小自动换行. (2)段落和段落之间保有空隙 3.段落和换行标签
4.文本格式化标签(文档文字加粗,斜体,下斜线,下方案例就推荐前面的那一种写法) (1)加粗:
(2)倾斜
(3)删除线
(4)下划线
5.<div>和<span>标签(双标签) 这两个标签用来布局网页,类似于盒子,可以装单独的内容等. (1)<div></div>独占一行,可理解为一个很大的盒子. (2)<span></span>一行可以放多个<span>,相当于小盒子 6.图像标签和路径 1.图像标签:<img>(单标签) (1)src(必须属性)必须写,指定了<img>图像文件的路径和文件名
(2)alt(替换文本)当图像不能显示就显示文字
(3)title(提示文本)鼠标放在图像上,显示的文字
(4)width(图片宽度)
(5)height(图片高度)
ps:最好只修改宽度或者高度,这样就会等比例压缩,不会出现图像的变形 (6)border(边框粗细)
ps:①图像标签可以有多个属性,必须写在标签名后面 ②属性不分前后,均以空格分开 ③属性="属性值" 7.路径 (1)目录文件夹:存所有的该网站的html文件和素材 (2)根目录:打开目录文件夹第一层就是根目录 (3)相对路径: 若要找到同级文件夹的下一层的文件
若要找上一层的文件
(4)绝对路径: 指文件的绝对位置,可以直接在电脑中找图片的文件,可以在网络中找图片(找网站中的图片) 8.超链接标签 <a>标签可用于定义超链接,作用是从一个页面连接到另一个页面. (1)链接的语法格式
①herf(必须属性)用于指定链接目标的url地址,有了它就有了超链接功能 ②target:用于指定链接页面打开方式,target后面可以写_self或者_blank.其中_self为把当前页面变成链接通向的网页,不保留原来的网页,_blank为打开新窗口并通往新窗口. (2)链接的分类: ①外部链接:可以跳转到外部网站
②内部链接:网站内部之间的相互链接
两者都只需要在href后写目标的链接的地址即可. ③空连接:在地址写#
④下载链接:
⑤锚点链接:当我们点击链接时,可以快速定位到页面中的某个位置 在链接文本的href属性中写一个""#目的地""的形式,在目标位置添加一个id属性:id="目的地".
9.注释和特殊字符标签 (1)注释标签:以"<!--"开头,"-->"结束.(快捷键:ctrl+/) 注释后在文档中不会在显示该部分内容,也不会执行,这是方便程序员来查看的,解释功能. (2)特殊字符: --空格( ):? --小于号(<):? < --大于号(>):? > --与号(&):? & --人民币(¥):? ¥ --版权(?):? © --注册商标(?):? ® --摄氏度 :? ° --正负号 :? ± --乘号(x):? × --除号(÷):? ÷ --平方(2):? ² --立方(3):? ³ 五.表格 1.表格的基本结构
表头的单元格(居中加粗):<th></th> <thead></thead>:包含表头,必有<tr></tr> <tbody></tbody>:包含表的内容 2.表格的属性(不常用) (1)align:规定表格对周围元素的对齐方式,具体属性值可以为:"left,center,right" (2)border:规定表格单元是否有边框,默认为"",表示没有边框 (3)cellpadding:规定表格单元边沿与其内容之间的空白,默认1像素 (4)cellspacing:规定单元格之间的空白,默认2像素 (5)width:规定表格宽度
3.合并单元格 (1)跨行合并:rowspan="合并单元格个数" (2)跨列合并:colspan="合并单元格个数"
合并单元格之后记得删除合并后覆盖的单元格. 持续更新,随学习进度更新 |
|
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 | -2024/12/23 18:57:13- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |
数据统计 |