2022-08-22 第六小组 瞒春 学习笔记

🚩前言

🌻今天开始进入javaweb阶段，不同于最初的web阶段，我们将深入的进行前端的部分学习，即便我们所学的仍旧是冰山一角，但是对于后端开发者已经足够。

目录

✏️HTML

📌什么是html

HTML是用来描述网页的一种语言
HTML叫做超文本标记语言
HTML是一种标记语言
标记语言就是一套标记标签
HTML使用标记标签来描述网页

📌网页是由谁来解析的

浏览器
IE
Firefox 火狐——flash中文
safari （浏览器内核webkit）苹果
chrome （浏览器内核blink）谷歌浏览器（推荐）——业界标杆
Opera 手机端
UC，360，百度，搜狗
HTML标记标签通常称为HTML tag
HTML的标签由成对出现的尖括号包围关键字，比如
HTML标签通常是成对出现的，标签中第一个标签是开始标签，第二个标签是结束标签
结束标签是由/结束的
开始标签和结束标签也被称为开放标签和闭合标签

📌什么是网页

html文档描述的就是网页
HTML文档包含了HTML的标签和纯文本
HTML文档就把称为网页
web浏览器的作用是读取HTML文档，并以网页的形式显示出他们，浏览器不会显示HTML标签，而是使用HTML标签来展示页面的内容

📌HTML头部

head元素包含了所有的头部信息元素
title：定义了浏览器工具栏的标题，当网页被收藏到收藏夹，显示的默认标题，显示在搜索引擎结果页面的标题
base：描述了基本的链接地址或者是链接目录，作为HTML文档中所有的链接
link：是引用css层叠样式表
style：是定义css层叠样式表
script：既可以定义script脚本，也可以引用script文件。——【不建议写在head里，写在结束body的最下方】
meta：元数据——用来指定网页的描述，关键词，文件的最后修改时间，网页的作者

✒️HTML标签

<!-- 标题 --><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><p>这是一个段落</p> 上下各空一行字体不变
    <hr size="24">  有属性的标签
    <br><!-- 注释:解释说明的作用 --><!-- 格式化的一些标签 --><b>粗体文本</b><code>计算机代码 main</code><em>强调文本(斜体)</em><kbd>键盘输入</kbd><pre>预处理(预文本)</pre><small>更小的文本</small><strong>重要的文本</strong><del>删除线</del>
    lg<sub>100</sub>=22<sup>3</sup>=8<font color="green">字体</font>

✒️超级链接

<!-- 超级链接 --><a href="https://www.baidu.com" target="_self">普通的链接</a><br><a id="tip">锚记连接---提示部分</a><a href="https://www.baidu.com">图像标签<img src="img/a.webp" alt=""></a><a href="[email protected]">邮箱链接</a><a href="#tip">跳到提示部分</a>

✒️图片

<!-- 图片img --><img src="img/a.webp" alt="" align="center">对齐和后面的文本

✒️行级与块级元素

<!-- 文档中的块级和行级元素
        块级元素:自占一行----自带换行功能----div,h,p,from,ul,ol
        行级元素:自己没有换行的功能 ----a,span,del,sup,sub,strong
    --><div>文档中的块级元素</div><span>文档中的行级元素</span>

✒️列表

<!-- 列表 --><!-- 无序列表 --><ul type="disc"><li>项目1</li><li>项目2</li></ul><!-- 有效列表 --><ol type="a"><li>项目123</li><li>项目123</li><li>项目123</li><li>项目123</li></ol><!-- 自定义列表 --><dl><dt>项目</dt><dd>描述项目1</dd><dt>项目2</dt><dd>描述项目2</dd></dl>

✒️表格

<!-- 表格 --><table border="1" cellpadding="10内边距" width="1100" cellspacing="0单元格边距"><thead><tr><th >学号</th><th>姓名</th><th>联系方式</th><th>毕业院校</th><th >国籍</th></tr></thead><tbody><tr><td>1001</td><td>罗永浩</td><td>13523142421</td><td>延边第二中学</td><td rowspan="3">中国</td></tr><tr><td>1002</td><td>罗翔</td><td>13125691131</td><td>北京大学法学院</td></tr><tr><td>1003</td><td>樊登</td><td>15521256672</td><td>西安交通大学</td></tr></tbody><tfoot><tr><td colspan="5" align="center">他们都是有钱人</td></tr></tfoot></table>

✒️框架

<!-- 框架 --><iframe src="https://tiyu.baidu.com/match/lpl/tab/%E8%B5%9B%E7%A8%8B/from/baidu_aladdin" frameborder="1"  width="800" height="600"></iframe>

✒️表单

<!--表单 --><form action="" method="post"><p>账户:<input type="text"></p><p>密码:<input type="password"></p><p>性别:<input type="radio" name="gender"checked>男
            <input type="radio" name="gender">女
        </p><p>地址:<select multiple --多选><optionvalue="">请选择省</option><optionvalue="">吉林省</option><optionvalue="">北京市</option></select><select><optionvalue="">请选择市</option><optionvalue="">长春市</option><optionvalue="">北京市</option></select><select><optionvalue="">请选择区</option><optionvalue="">朝阳区</option><optionvalue="">三里屯</option></select></p><p>爱好:<input type="checkbox">读书
            <input type="checkbox">游泳
            <input type="checkbox"checked>打扑克
        </p><p><textarea name="" id="" cols="30" rows="10"></textarea></p><p>邮箱:<input type="email" name="" id="">自带验证功能
        </p><p>数字
            <input type="number" name="" id=""></p><p>头像
            <input type="file" name="" id=""></p><p>隐藏
            <input type="hidden" name="" id=""></p><p><input type="submit"value="自来也"><input type="reset" name="" id=""><input type="button"value="卡卡西"><button type="submit">提交</button><button type="button">自定义</button><button type="reset">重置</button></p></form>

action：数据提交后台地址
method：数据提交方式
get：默认值，会把所有的提交的数据拼接在地址栏——【不安全，有长度的限制】
post：封装一个请求体，把数据提交给后台，不会拼接——【安全，没有长度限制】
readonly与disabled的区别
readonly可以提交到后台
disabled不可以提交到后台

✒️音频标签和视频标签

<!-- 定义音频内容 --><audio src=""></audio><!-- 定义视频内容 --><video src=""></video>

✒️转义字符

&nbsp；  空格
&alt ：    &

✒️HTML4与HTML5之间的关系

在HTML4里几个标签在HTML5中有的被删除有的被废弃
HTML5在2012年成为稳定的版本
HTML5新增
画布
多媒体
重力感应
地图
webSocket——网页端的网络通信

✏️CSS

✒️类选择器

/* 类选择器可以选择多个用空格隔开 */.fontstyle{
            color: red;
            font-size: 20px;}.backcolor{
            background-color: aqua;}

✒️id选择器

/* id选择器 每个标签元素的id是唯一的不能重复*/#dd{
            color: blue;
            font-size: 30px;}
标签选择器
       /* 标签选择器 */
        p{
            font-family:"仿宋";}

✒️全部选择器

/* 通配符,全部选择器 页面初始化*/
*{
margin: 0;
padding: 0;
}

✒️组合选择器

/* and 组合选择器 */
        h1,div{
            font-size: 100px;}/* 后代选择器 */div p{
            background-color: red;}/* 子选择器 */
        div>p{
            background-color: aqua  ;}/* 紧跟着div的p元素 */
        div+p{
            background-color: pink;}/* 属性选择器 */
        input[name]{
            color: red;
            width: 1000px;
            font-size: 50px;}
        input[name=username]{
            color: blue;}

✒️伪类选择器

a{
            color: red;}/* 初始状态 */
        a:link{
            color: blueviolet;}/* 激活状态 */
        a:active{
            color: aqua;}/* 鼠标悬停状态 */
        a:hover{
            color: greenyellow;}/* 访问过的状态 */
        a:visited{
            color: black;}
        img:hover{
            width: 200px;}
        p::first-letter{
            color: red;}

☀️总结

快速的进行过去的html以及css的部分学习，并加入了一点新的东西，通过代码块的练习可以快速回忆起过去所学，以便投入到更深入的学习当中。