2022-08-22 第二小组 张明旭 前端学习记录

最新推荐文章于 2024-07-04 16:37:43 发布
最新推荐文章于 2024-07-04 16:37:43 发布
阅读量250 收藏
点赞数 1
文章标签： 前端 学习 html java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71777094/article/details/126471650
版权

目录

心情日记

重点归纳

知识点

什么是html?

HTMl标记标签通常称为HTML tag

网页由浏览器解析

什么是网页？

HTML的头标签

   

meta:元数据

 HTML的简单标签

    标题标签

    段落标签

    单独出现的标签

注释

常用标签

超级链接

 块级元素

    行级元素

 无序列表:自带换行

    表格

表单常见元素

实体 Entity(转义字符)

HTML的更替

CSS

   什么是css？

 1.行内样式

2.内联样式

 3.外部样式（推荐）

CSS的选择器

类选择器、id选择器、组合选择器等

伪类选择器：

选择器的优先级

心情日记

从今天起再次开始前端的学习，重新认识了前端的广阔以及难度，并不像一些人说的“简单、易学”，还好是Java软件开发工程师，不是前端SEO。

重点归纳

  1. 什么是HTML？
  2. HTML的常用标签
  3. 表单、表格
  4. CSS的选择器

知识点

什么是html?

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

HTMl标记标签通常称为HTML tag

  HTML标签由成对出现的尖括号保卫的关键词，比如<body>

  HTML标签通常是成对出现的，有例外：<b>

网页由浏览器解析

常用的浏览器：

          1.IE，已经下线

          2.firefox火狐，一些操作要使用flash才能完成

          3.safari 苹果，内核为webkit

          4.chrome 谷歌（推荐），虽然退出中国，但程序员大多会用，业界的标杆

          Opera 手机端浏览器

          百度、UC、360、QQ、搜狗、遨游、2345

什么是网页？

  •         HTML文档描述的就是网页
  •         HTML文档包含了HTML的标签和文本
  •         HTML文档就称为网页，由浏览器解析
  •         浏览器的作用就是读取HTML文档，并以网页的形式显示出来
  •         浏览器不会显示HTML标签

HTML的头标签

        head包含了所有的头部信息元素

        头部信息元素有:script、link以及个各种meta,title,base

title:

        定义了浏览器工具栏的标题，当网页被收藏到收藏夹时,显示的标题为title

        显示在搜索引擎结果页面的标题

base:

        描述了基本的链接地址或链接目录,它是作为HTML文档中,所有链接标签的默认连接

link:

        引用css层叠样式

style:

    定义层叠样式

script:

    既可以定义script脚本,也可以引用script文件

    不建议写在head里,卸载body的最下边

   

meta:元数据

    指定网页的描述,关键字,文件的最后修改时间、作者

    可以定义网页的搜索引擎

    SEO:搜索引擎优化

 HTML的简单标签

    标题标签

    <h1>最大的标题h1</h1>

    <h2>最大的标题h2</h2>

    <h3>最大的标题h3</h3>

    <h4>最大的标题h4</h4>

    <h5>最大的标题h5</h5>

    <h6>最大的标题h6</h6>

    浏览器纠偏:HTML永远不会报错

    段落标签

    <p>上下空一行</p>

    单独出现的标签

    <hr size="7" color="red" width="500">水平分割线,有属性

    <br>

注释

    <!-- 注释 -->

    所有样式的该表都用css,不用属性

常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <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 bgcolor="green"(或background="图片")>
    粗体标签
    <b>文本
    
    代码
    <code>计算机代码,能识别语言</code>

    强调文本
    <em>斜体</em>

    斜体文本
    <i>斜体文本</i>

    键盘输入
    <kbd>键盘输入</kbd>

    预格式化文本
    <pre>
        池塘边的榕树上,知了在声声叫着夏天
    </pre>

    <small>更小的文本</small>

    <del>删除线</del>

    log<sub>10</sub>下标文本

    2<sup>3</sup>=8, 上标文本

    <ins>插入文本</ins>

    <del>删除文本</del>

    <font color="green">我是font</font>



</body>
</html>

超级链接

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    普通链接:
    <a href="http://www.baidu.com" target="_self" title="点我">走你</a>
    <br>
    图片链接:
    <a href="http://www.baidu.com"><img src="20220822\img\timg-10.jpeg" alt="这是拉克丝" title="光辉女郎"></a>
    <br>
    邮箱连接
    <a href="mailto:123456789@qq.com">站长信箱</a><br>
    锚记链接
    <a id="tips">提示部分</a>
    <a href="#tips">跳到提示部分</a>
</body>
</html>

 块级元素

    自占一行，自带换行功能

    div/h/p/form/ul/ol...

    <div>我是块级元素</div>

    行级元素

    自己没有换行功能

    a/span/del/sub/sup/em/b/strong...

    <span>我是行级元素</span>

 无序列表:自带换行

    <ul type="文字前标识样式">

        <li>我是无序列表</li>

        <li>我是无序列表</li>

        <li>我是无序列表</li>

        <li>我是无序列表</li>

        <li>我是无序列表</li>

    </ul>

    有序列表：<!-- 自带换行 -->

    <ol type="I">

        <li>我是有序列表</li>

        <li>我是有序列表</li>

        <li>我是有序列表</li>

        <li>我是有序列表</li>

        <li>我是有序列表</li>

    </ol>

    自定义列表:可以有层次关系

    <dl>

        <dt>项目1</dt>

        <dd>描述项目</dd>

        <dt>项目2</dt>

        <dd>描述项目</dd>

    </dl>

    <!-- 快捷方式ol>dt*5 -->

    表格

性质： 一组标签
关键字：table:生成表格

背景图片优先于背景颜色
    th:表头.在tr里
    合并单元格:td里
    跨列colspan="几列"
    跨行rowspan="几行"

缩进:
    语义化标签，写不写页面都不变，目的就是增加代码的可读性
 

    <thead>表头</thead>
    <tbody>数据</tbody>
    <tfoot>表尾</tfoot>
<!DOCTYPE html>
<html lang="en">
<head>
    <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>

    <table border="1" cellpadding="10" cellspacing="0" width="400">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>联系方式</th>
                <th>毕业院校</th>
                <th>国籍</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>罗永浩</td>
                <td>13245557896</td>
                <td>延边市第二中学</td>
                <td rowspan="4">中国</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>罗翔</td>
                <td>13145569852</td>
                <td>北京大学</td>
            </tr>
            <tr>
                <td>1003</td>
                <td>樊登</td>
                <td>13245695862</td>
                <td>西安交通大学</td>
            </tr>
            <tr>
                <td>1004</td>
                <td>雷军</td>
                <td>12345678945</td>
                <td>武汉大学</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    备注：他们都是有钱人
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表单常见元素

建立一个表单，通过表单认识表单中常见元素

<!DOCTYPE html>
<html lang="en">

<head>
    <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>
    <!-- action是数据后台提交位置
            method是数据的提交方法，两个：
            get：默认值，会把所有的要提交的数据拼接在地址栏，不安全，还有地址栏长度的问题
            post：封装一个请求体，把数据提交给后台，不会拼接在地址栏  
        -->
    <!-- 向后台发请求的方式有多种，表单只是其一
             超级链接也可以向后台发请求
        -->
    <form action="aaa" method="post">

        <!-- 常见表单元素 -->
        <p>
            账号：<input type="text" name="username" placeholder="请输入8~12位">
            <!-- value就是文本框写入的值 -->
            <!-- readonly 与 disabled区别
                 readonly 可以提交到后台的
                 disabled 是不可以提交到后台的
            -->
            <!-- 
                placeholder：在文本框中的水印，输入时隐藏。
             -->
        </p>
        <p>
            密码：<input type="text" name="password" placeholder="请输入8~12位">
        </p>
        <p>
            姓名：
            <input type="radio" name="gender" id="man" value="男">
            <label for="man">男</label>
            <input type="radio" name="gender" id="woman" checked value="女">
            <label for="woman">女</label>
        </p>
        <p>
            地址
            <select>
                <!-- select是菜单框 -->
                <option value="0">请选择省</option>
                <option value="吉林省">吉林省</option>
                <option value="北京">北京</option>
            </select>
            <select>
                <option value="0">请选择市</option>
                <option value="长春市">长春市</option>
                <option value="北京市">北京市</option>
            </select> <select>
                <option value="0">请选择区</option>
                <option value="南关区">南关区</option>
                <option value="西城区">西城区</option>
            </select>
        </p>
        <p>
            爱好：
            <input type="checkbox" id="read" checked value="read">
            <label for="read">读书</label>
            <!--checked 默认选择-->
            <input type="checkbox" id="swim" value="swimming">
            <label for="swim">游泳</label>
            <input type="checkbox" id="lanqiu" value="baseketball">
            <label for="lanqiu">篮球</label>
        </p>
        <p>
            <!-- 文本区 -->
            <textarea name="desc" id="" cols="30" rows="10"></textarea>
        </p>

        <p>
            邮箱：<input type="email" name="" name="small">
        </p>

        <p>
            生日：<input type="date" name="birthday">
        </p>

        <p>
            薪水：<input type="number" min="0" max="15000" name="salary">
        </p>

        <!-- 文件上传 -->
        <p>
            <!-- 头像：<input type="file"> -->
        </p>

        <p>
            调色板：<input type="color">
            电话：<input type="tel" name="telephone">
        </p>

        <p>
            隐藏：<input type="hidden">
            <input type="range">
            <input type="ur1">
        </p>

        <p>
            按钮
            <!-- input默认有名字
                 button默认没有名字     
            -->
            <input type="submit" value="注册">
            <!-- 提交按钮 -->
            <input type="reset" value="重置">
            <input type="button" value="自定义按钮">
            <!-- <button type="submit">提交</button>
            <button type="reset">重置</button>
            <button type="button">自定义按钮</button> -->

            <!-- 一般项目的要求：
                 有form，用input
                 没有form，用button
                 要求不绝对，随便用，但要统一，用input全用input
            -->
        </p>


    </form>
</body>

</html>

实体 Entity(转义字符)

   文本文本文本&nbsp;文本文本文本

    &nbsp; 空格(多就不要用了,可以用css的外边距)

    &amp;and符号:&

    &lt;小于号

    &gt;大于号

    &copy;版权号

HTML的更替

1999年HTML4.01里程碑版本，大部分标签都是4.01版本的，在HTML4.01中的几个标签已经废弃，有的被删除，有的被重新定义。

HTML5在2012年形成稳定版本


H5新增功能：
画布：非常实用（手机端），前端的事(挺难)
多媒体：H5直接可以播放多媒体，可以操作手机端的多媒体
重力感应
地图

多媒体、以及其他新增的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
     <!-- 
        多媒体:可以播放音频视频
      -->
      <!-- 定义音频内容 -->
      <audio src="123.mp3" autoplay controls></audio>
      <!-- 定义视频内容 -->
      <video src="123.mp4" autoplay controls></video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <form action="" novalidate>
        <!-- 
            取消所有验证效果比如必填，英文限制等
         -->
        <input type="text" autofocus required >
        <!-- 
            autofocus(自动获取焦点)
            required(非空)
         -->
        <!-- <input type="image" height="20" src="../img/timg-10.jpeg"> -->
        <!-- 
            以图片当做提交按钮
         -->
        <br>
        <input type="number" step="100"  min="1000" max="6000">
        <input type="submit">

        <input type="text" pattern="[A-Za-z]{3}" placeholder="请输入三位英文字符">
    </form>
</body>
</html>

HTML5有浏览器兼容器，IE9之前几乎不支持H5

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
     H5的视频:
    <video src="123.mp4"></video>

    H4的视频和音频:
        <video width="" height="">
            <source src="">
        </video>

        <audio>
            <source src="">
        </audio> -->

        <input type="date">
        <input type="time">
        <input type="datetime">
</body>
</html>

CSS

   什么是css？

        例如：html是布料，css是上色

        css叫层叠样式表：

  • 定义如何显示html元素-----样式
  • 样式通常存储在样式表中，把样式表添加带html中，就叫样式和结构分离（内容与变现分离）
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常储存在css文件中

 1.行内样式

     <p style="background-color: red;">我是p标签</p>

2.内联样式

    <style>
        h2{
            background-color: green;
        }
        span{
            background-color: yellow;
        }
    </style>

 3.外部样式（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
      <!-- 
        3.外部样式（推荐）
       -->

       <a href="#">我是超级链接</a>
</body>
</html>

CSS的选择器

类选择器、id选择器、组合选择器等

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <style>
        /* 类选择器 */
        .fontStyle{
            color: red;
            font-size: 20px;
        }
        .backgroundStyle{
            background-color: yellow;
        }

        /* id 选择器，每个标签元素的id不能重复 */
        #fontStyle2{
            color: blue;
            font-size: 30px;
        }

        /* 标签选择器 */
        p{
            font-family: "楷体";
        }

        /* 通配符（全部选择器）：
        用在页面初始化,约束整个页面 */
        * {
            margin: 0;
            padding: 0;
        }

        /* and选择器（选中页面中两个或多个元素）
        页面上所有选中的元素样式都一样 */
        h1,div{
            font-size: 50px;
        }

        /* 后代选择器 */
        div p {
           color:red ;
        }

        /* 子选择器：选中div里所有的p子标签（孙子不好使） */
        div > p{
          color: blue;
        }


        /* 选中紧跟着div的p 的选择器 */
        div+p{
            color: pink;
        }

        /* 属性选择器 */
        input[name]{
            height: 100px;
            font-size: 200px;
        }


        /* 更细致的属性选择器 */
        input[name=username]{
           color: red;
        }
    </style>
</head>
<body>
    <!-- 
        CSS选择器
     -->
     <!-- 
        可以选择多个类选择器，用空格隔开
      -->
      <input type="text" name="username">
      <input type="password" name="password">
     <p class="fontStyle backgroundStyle">我爱你中国</p>
     <p id="fontStyle2">我爱你长春</p>
     <h1>我是h1</h1>
     <div>我是div</div>
     <div>
        <span>
            <P>我是div里的span里的p1</P>
        </span>
        <p>我是div里的p2</p>
    </div>
    <p>
        我是div外的p
    </p>
    <div>我是div</div>
    <div>我也是div</div>
    <p>我是跟着div的p</p>
    <span>我是span</span>
    <p>我也是p</p>

</body>
</html>

 

伪类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <style>
        /* 初始状态 */
        a{
            color: red;
        }
        /* 初始状态 */
        a:link{
            color: red;
        }
        
        /* 鼠标悬停状态 */
        a:hover{
            color: green;
        }

        /* 激活状态 */
        a:active{
            color: black;
        }


        /* 已访问的状态 */
        a:visited{
            color: yellow;
        }

        /* 获得焦点 */
        input:focus{
            height: 100px;
            font-size: 50px;
        }

        
    </style>
</head>
<body>
    <!-- 
        伪类选择器
     -->
     <a href="2">超级链接</a>
     <input type="text">
</body>
</html>

选择器的优先级

优先级：

  1. 最高优先级是直接在标签中设置样式
  2. 其次是id选择器
  3. 其次是类选择器
  4. 最后是标签选择器
华丽转身撞到墙
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2022-08-27 第二小组 张明旭 Vue.js学习记录
weixin_71777094的博客
08-27 157
Vue的基本语法、添加事件、函数的方法、面试题v-if=""与v-show=""的区别？、属性绑定、遍历方式、双向绑定
2022-07-11 第一小组 张明旭 前端JS学习记录
weixin_71777094的博客
07-14 191
前端JS基础
2022-08-24 第二小组 张明旭 前端学习记录
weixin_71777094的博客
08-24 310
JavaScript
2022-08-23 第二小组 张明旭 前端学习记录
weixin_71777094的博客
08-23 310
CSS三大特性、CSS选择器*****、盒子模型、定位、浮动、元素的隐藏
2022-08-25 第二小组 张明旭 前端学习记录
weixin_71777094的博客
08-25 177
1.JavaScript 2.回调函数 3.定时函数/周期函数 4.事件的添加、删除、捕获 5.一些ES6语法
2022-08-26 第二小组 张明旭 前端学习记录
weixin_71777094的博客
08-26 185
JS库：JQuery、JQuery中的语法、添加事件、操作属性、增删样式
2022-07-09 第一小组 张明旭 前端HTML学习记录
weixin_71777094的博客
07-14 173
前端HTML
2022-07-10 第一小组 张明旭 前端CSS学习记录
weixin_71777094的博客
07-14 86
前端CSS基础
2022-07-14 第一小组 张明旭 Java基础学习记录
weixin_71777094的博客
07-14 145
Java基础
论文研究-基于ITU-R P.1546-3建议书的一种电波传播修正模型 .pdf
08-17
基于ITU-R P.1546-3建议书的一种电波传播修正模型，李明旭，姜弢， ITU-R P.1546-3建议书（以下简称1546建议书）是国际电信联盟提供的地面业务点对面无线电传播预测的方法。由于1546建议书规定发射天线高�
草分枝杆菌选择性絮凝脱除煤中黄铁矿硫的研究
12-30
草分枝杆菌选择性絮凝脱除煤中黄铁矿硫的研究，张东晨，张明旭，本文通过对疏水性微生物草分枝杆菌（M.phlei）生物学特性的研究，并结合红外光谱分析，探讨了草分枝杆菌（M.phlei）对煤炭的絮凝作用�
0.3～3.0GHz频率下煤中噻吩硫组分介电特性及其与分子极性关系研究
01-09
0.3～3.0GHz频率下煤中噻吩硫组分介电特性及其与分子极性关系研究，葛涛，张明旭，基于民用微波频率的限制，掌握0.3～3.0GHz频率下煤中噻吩硫组分介电性质，探索噻吩硫组分分子极性与介电性质之间的关系，对研究煤中
黄孢原毛平革菌的诱变及对煤炭转化的研究
01-19
黄孢原毛平革菌的诱变及对煤炭转化的研究，徐敬尧，张明旭，通过对木质素具有降解能力的黄孢原毛平革菌进行微波辐射诱变处理，选育出一株具有较强褐煤降解能力的突变体，对义马褐煤的降解率
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1102
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
最新发布
weixin_58540586的博客
07-04 901
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1400
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 294
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
4-2.数据湖存储机遇与挑战.pdf
03-18
"4-2.数据湖存储机遇与挑战.pdf"文档探讨了这一新兴技术的发展脉络、现状及其带来的机遇与挑战。 首先，数据行业的变革促使数据湖的崛起。随着个人和机器产生的数据呈爆炸性增长，以及企业应用的广泛应用，原有的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值