开启新篇章~其实是又加了个工作室hhh)
目录
I.HTML简介
①网页
②HTML(重点!)
③网页的形成: 网页是由网页元素组成(利用html标签描述出来)的然后通过浏览器解析显示给用户
④浏览器
⑤web标准(重点!) →Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合【W3C(万维网联盟)是国际最著名的标准化组织】
1)原因
2)构成→主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面
3)总结
⑥语法规范
1)<html> </html> 双标签,结束前有/ ;
<br /> 单标签;
2)双标签关系→包含关系(父子)和并列关系(兄弟)
eg. ✿<html>
<head> </head>
</html>✿<body> </body>
II. 基本结构标签
①分类
eg.写的第一个页面嘿嘿,目前感觉比算法简单好多qwq!
<html> <head> <title> 第一个页面 </title> </head> <body> 继续加油! </body> </html>
效果图:
(就打了四个字的懒仔)PS:✿重命名的时候如果电脑不显示后缀的话,我的电脑→查看→选文件拓展名
✿title→网页名,body→网页内容
② 总结
III. VScode相关
①建页面
②推荐插件
③自带代码的解释
框出来的那一块好像没什么影响。。
这句话不写可能会乱码!!!
总结
IV.常用标签
①标题标签< h1-6 >
作用:字体加粗加大
预览效果:
② 段落标签 < p >
作用:文档分段
③换行标签 < br / >(单)
作用:强制换行
④文本格式化标签
⑤盒子标签(无语义)
1)<div>→division缩写,表示分割,分区;
eg、代码:
<div>我是一个div标签我一个人单独占一行</div>123 <div>我是一个div标签我一个人单独占一行</div>123
效果:
2)<span>→跨度、跨距 好像只有一个空格(?)
eg、代码:
<span>百度</span> <span>新浪</span> <span>搜狐</span>
效果:
⑥图像标签 < img >(单)和路径
eg.
<img src="图像URL"/>
PS:
1)属性
eg.代码:
<img src="img.jpg"> <h4>alt替换文本图像显示不出来的时候用文字替换:</h4> <img src="img1.jpg" alt="可爱修猫"> <h4>title提示文本鼠标放到图像上,提示的文字:</h4> <img src="img.jpg" alt="可爱修猫" title="可爱www"> /* 图片是网上找的可爱布偶猫ww! */
预览:title那个截图出不来qwq
PS.目录
2)路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径;
绝对路径:指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
⑦链接标签 < a >
作用:定义超链接,作用是从一个页面链接到另一个页面
1)语法格式
<a href="跳转目标"target="目标窗口的弹出方式">文本或图像</a>
常用_blank
eg.代码:
<a href="http://www.qq.com">腾讯</a>
预览:
2)分类
PS:※1 内部链接,要在同一目录下;
※2 空连接点不出东西;
※3 网页元素链接,元素附加链接
⑧表格标签
作用:显示数据
1)分类
常用*3 ❀<table></table>是用于定义表格的标签;
❀<tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中;
❀<td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中;
❀字母 td指表格数据(table data),即数据单元格的内容
表头<th></th> (table head)一般位于表格的第一行或第一列(单元格里面的文本内容加粗居中显示);
eg.
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
结构*2 ❀<thead></thead>:定义表格头部,<thead>内部必须有<tr>;
❀<tbody></tbody>:定义表格主体,主要用于放数据本体
2)属性→写< table >里
PS:不常用→一般用CSS 还没学到啊喂!!!
3)合并单元格
方式 ❀跨行合并:rowspan=”合并个数”→最上侧单元格为目标单元格
❀跨列合并:colspan ="合并个数”→最左侧单元格为目标单元格
(如果不理解的话看下图)
目标单元格 就是合并代码写的地方
步骤
eg.代码:
<table border="1" cellspacing="0" cellpadding="10"> <thead> <tr> <th>合并行</th> <th>样</th> <th>例</th> </tr> </thead> <tbody> <tr> <td rowspan="3">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> <br /> <table border="1" cellspacing="0" cellpadding="10"> <thead> <tr> <th>合并列</th> <th>样</th> <th>例</th> </tr> </thead> <tbody> <tr> <td colspan="3">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table>
预览:
没删单元格所以有点丑
⑨列表标签
作用:布局(有无序、有序、自定义列表)
1)无序列表
用<ul>标签定义,一般会以项目符号呈现列表项,用<li>标签定义列表项
2)有序列表
用<ol>标签定义,列表排序以数字来显示,用<li>标签定义列表项
3)自定义列表
用<dl>标签定义(<dt> → 定义项目/名字;<dd> → 描述每一个项目/名字)
使用场景 常用于对术语或名词进行解释和描述,列表项前没有任何项目符号
eg.代码:
<ul> <li>默认的</li> <li>项目符号</li> <li>是黑点</li> </ul> <br /> <ol> <li>不知道</li> <li>写点</li> <li>什么qwq!</li> </ol> <br /> <dl> <dt>→近期目标←</dt> <dd>高分过六级、考大英(争取拿奖!!)</dd> <dd>学算法和web</dd> <dd>减肥啊qwq!!!</dd> <dd>争取搞个奖学金(但是大一好像不让评qwq)</dd> <dt>留个足迹怎么样(doge)</dt> <dd>点赞</dd> <dd>关注</dd> <dd>评论</dd> </dl>
预览:
字是随便打的doge总结
⑩表单标签
- 作用:收集用户信息
- 组成:由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。
表单域 用<form>标签用于定义→实现用户信息的收集和传递
表单控件(元素)
❀<input>输入表单元素→收集信息 (单标签!)
属性
※1 type
1️⃣ submit→点击后把元素的值提交给后台,默认内容为“提交“,可通过value更改;
eg.
<input type="submit" value="免费注册">
※2 其他
1️⃣ 实现单选→ <input>的name相同(复选框也要);同一单选和复选框的name必须一致
2️⃣ name和value→每个表单元素都有的属性值,主要给后台人员使用;
3️⃣ value→默认显示值;
4️⃣ checked→<radio>单选唯一,<checkbox>多选随意
<lable>标签 ▲常与<input>搭配用▲→为input元素定义标注
for和id可以顺序不一样!
eg.代码:
<form> 性别 <input type="radio" name="sex" id="na"> <label for="na">男 </label> <input type="radio" name="sex" id="nv"> <label for="nv">女</label> </form>
预览:(点男女就可以选嗷w!)
❀select下拉表单元素
❀textarea文本域元素
V.注释和特殊字符
①注释 <!--注释语句-->(快捷键:ctrl+ /):解释代码+程序不执行、页面不显示
②特殊符号(框出来的是必记的)
VI.查阅文档
恭喜看到这的小伙伴w,已经完成HTML基本知识的学习了哦!!!
下面进入CSS的学习吧(★ ω ★)→CSS第一天
有用的话就点赞评论收藏嗷!!