其他分享
首页 > 其他分享> > 2022-08-22 第二组刘禹彤 学习笔记

2022-08-22 第二组刘禹彤 学习笔记

作者:互联网

打卡37天

 

 

 

 

###学习内容

HTML

概述

HTML是用来描述网页的一种语言

HTML叫做超文本标记语言(Hyper Text MarkerUp Language

HTML不是编程语言,而是一种标记语言,标记语言就是一套标记标签,使用标记标签来描述网页

网页是用浏览器来解析的

HTML标签(HTML tag)

HTML标签由成对出现的尖括号包围的关键词-------比如<body>

HTML标签通常是成对出现的----比如<b></b>

标签对中第一个标签是开始标签,第二个标签是结束标签(是由/结束的

开始和结束标签也被称为开放标签和闭合标签

常用标签

  1. <hi>标题大小</hi>
  2. <p>段落</p>
  3. <hr>水平分割线---------例:<hr >
  4. <br>换行
  5. <!--注释-->
  6. <b>粗体文本</b>
  7. <code>计算机代码</code>
  8. <em>强调文本</em>
  9. <i>斜体文本</i>
  10. <kbd>键盘输入</kbd>
  11. <pre>预处理,可以换行</pre>
  12. <small>更小的文本</small>
  13. <strong>重要的文本</strong>
  14. <del>删除线</del>
  15. log<sub>5</sub>上标
  16. <sup>3</sup>=8 下标
  17. <font color='"green">我是font</font>字体
  18. 超级链接-------普通链接 图片链接 邮件链接 信箱 锚机链接
  19. <div>文档中的块级元素---自占一行,自带换行功能(div,h,p,form,ul,ol......)</div>
  20. <span>文档中的行级元素----没有自己换行( a,span,del,sub,sup,em,b,strong....)</span>

列表

无序列表

 <ul type="disc">
            <li>项目1</li>
            <li>项目2</li>
        </ul>

有序列表

ol>li*4---快捷写法

<ol type="I">
            <li>项目1</li>
            <li>项目2</li>
            <li>项目3</li>
            <li>项目4</li>
        </ol>

自定义列表

自动有级别

 <dl>
            <dt>项目1</dt>
            <dd>描述项目1</dd>
            <dt>项目2</dt>
            <dd>描述项目2</dd>
        </dl>

表格

  <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>13635412586</td>
                    <td>延边第二中学</td>
                    <td rowspan="4">中国</td>
                </tr>
                <tr>
                    <td>1002</td>
                    <td>罗翔</td>
                    <td>13125693254</td>
                    <td>北京大学</td>
                </tr>
                <tr>
                    <td>1003</td>
                    <td>樊登</td>
                    <td>13326956541</td>
                    <td>西安交通大学</td>
                </tr>
                <tr>
                    <td>1004</td>
                    <td>雷军</td>
                    <td>15619851265</td>
                    <td>武汉大学</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">
                        备注:他们都是有钱人。
                    </td>
                </tr>
            </tfoot>
        </table>

框架

 <iframe src="https://www.sina.com.cn" height="600" width="400"
            frameborder="0"></iframe>
        <iframe src="https://www.sohu.com" height="600" width="400"
            frameborder="0"></iframe>

表单

 <form action="" method="post">
            <p>
                账号:<input type="text">
            </p>
            <p>
                密码:<input type="password">
            </p>
            <p>
                性别:
                <input type="radio" name="gender">男
                <input type="radio" name="gender" checked>女
            </p>
            <p>
                地址:
                <select>
                    <option value="">请选择省</option>
                    <option value="">吉林省</option>
                    <option value="">北京市</option>
                </select>
                <select>
                    <option value="">请选择市</option>
                    <option value="">长春市</option>
                    <option value="">北京市</option>
                </select>
                <select>
                    <option value="">请选择区</option>
                    <option value="">南关区</option>
                    <option value="">西城区</option>
                </select>
            </p>
            <p>
                爱好:
                <input type="checkbox" checked>读书
                <input type="checkbox">游泳
                <input type="checkbox" checked>跑步
            </p>
            <p>
                <textarea cols="30" rows="10"></textarea>
            </p>
            <p>
                邮箱:<input type="email">
            </p>
            <p>
                薪水:<input type="number">
            </p>
            <p>
                头像:<input type="file">
            </p>
            <p>
                颜色:<input type="color">
            </p>
            <p>
                电话:<input type="tel">
            </p>
            <p>
                隐藏:<input type="hidden">
            </p>
            <p>
                <!-- <input type="submit">
                <input type="reset">
                <input type="button" value="自定义按钮">
             -->
                <button type="submit">注册</button>
                <button type="reset">重写</button>
                <button type="button">自定义</button>
            </p>
        </form>

我们项目的要求:

如果有form,用input

如果没有form,用button

get:默认值,会把所有要提交的数据拼接在地址栏(不安全,有限制

post:封装在一个请求体,把数据提交给后台,不会拼接在地址栏(安全,无限制

readonly:可以提交到后台

disable:不能提交到后台

转义字符

网页

HTML文档描述的是网页

HTML文档包含HTNL的标签和纯文本

HTML文档被称为网页

HTML其实就是纯文本文档

HTML头部

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

script,link以及各种meta,title,base

title

定义了浏览器工具栏的标题,网页被收藏到收藏夹显示的默认标题,显示在搜索引擎结果界面的标题

base

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

link

引用css层叠样式表

style

定义css层叠样式表

script

即可以定义script脚本,也可以引用script文件,不建议写在head中,写在body的最下方

meta

元数据,指定网页的描述,关键词,文件的最后修改时间,作者

可以定义搜索引擎的关键词

HTML5

1999年HTML4.01里程碑版本,在HTML4.01中的几个人标签已经被废弃,这些元素在HTML5里有的被删除了,有的被重新定义,HTML5在2012年形成稳定的版本

H5新增功能

1)定义音频内容:<audio src="音频地址" autoplay controls></audio>

2)定义视频内容:<video src="视频地址" autoplay controls></video>

HTML浏览器兼容性

IE9之前几乎不支持H5

CSS

CSS层叠样式表-----------定义如何显示HTML元素(样式),样式通常存储到样式表中

把样式表添加到HTML中,内容和表现分离(样式和结构分离)

外部样式表可以极大提高工作效率

外部样式表通常存储到CSS文件中

CSS样式

行内样式

<p style="">我是P标签</p>
        <h1>我是h1标签</h1>
        <span>我是span标签</span>
        <a href="#">我是超级链接</a>

内嵌样式(内联样式)style

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

外部样式 link引入CSS文件

 <link rel="stylesheet" href="css/style.css">

CSS选择器

选择你想要的元素

类选择器

.名{}

在使用·类选择器旋择css样式时,可以选择多个,中间用空格隔开即可

id选择器

#名{}

每个标签原属的id是唯一的,不能重复

标签选择器

标签名{}

通配符,全部选择器

*{}

页面初始化

组合选择器

字段一,字段二{}

后代选择器

字段一 字段二{}

子选择器

字段一>字段二{}

紧跟着

字段一+字段二{}

属性选择器

伪类选择器

名:link{}

名:active

名:hover

名:visited

input:focus{}

###学习心得

今天又进入了HTML和CSS的学习,将直接前学习过的知识进行了重温和复习,对其内容进行了整理,基本理解

###掌握情况:一般

###课上练习

# HTML

## 概述

HTML是用来描述网页的一种语言
HTML叫做超文本标记语言(Hyper Text MarkerUp Language)
HTML不是编程语言,而是一种标记语言,标记语言就是一套标记标签,使用标记标签来描述网页
网页是用浏览器来解析的

## HTML标签(HTML tag)

HTML标签由成对出现的尖括号包围的关键词-------比如<body>
HTML标签通常是成对出现的----比如<b></b>
标签对中第一个标签是开始标签,第二个标签是结束标签(是由/结束的)
开始和结束标签也被称为开放标签和闭合标签

### 常用标签

1.  <hi>标题大小</hi>
2.  <p>段落</p>
3.  <hr>水平分割线---------例:<hr >
4.  <br>换行
5.  <!--注释-->
6.  <b>粗体文本</b>
7.  <code>计算机代码</code>
8.  <em>强调文本</em>
9.  <i>斜体文本</i>
10.  <kbd>键盘输入</kbd>
11.  <pre>预处理,可以换行</pre>
12.  <small>更小的文本</small>
13.  <strong>重要的文本</strong>
14.  <del>删除线</del>
15.  log<sub>5</sub>上标
16.  <sup>3</sup>=8 下标
17.  <font color='"green">我是font</font>字体
18.  超级链接-------普通链接 图片链接 邮件链接 信箱 锚机链接
19.  <div>文档中的块级元素---自占一行,自带换行功能(div,h,p,form,ul,ol......)</div>
20.  <span>文档中的行级元素----没有自己换行( a,span,del,sub,sup,em,b,strong....)</span>

## 列表

### 无序列表

 <ul type="disc">
            <li>项目1</li>
            <li>项目2</li>
        </ul>

### 有序列表

ol>li*4---快捷写法

<ol type="I">
            <li>项目1</li>
            <li>项目2</li>
            <li>项目3</li>
            <li>项目4</li>
        </ol>

### 自定义列表

自动有级别

 <dl>
            <dt>项目1</dt>
            <dd>描述项目1</dd>
            <dt>项目2</dt>
            <dd>描述项目2</dd>
        </dl>

## 表格

  <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>13635412586</td>
                    <td>延边第二中学</td>
                    <td rowspan="4">中国</td>
                </tr>
                <tr>
                    <td>1002</td>
                    <td>罗翔</td>
                    <td>13125693254</td>
                    <td>北京大学</td>
                </tr>
                <tr>
                    <td>1003</td>
                    <td>樊登</td>
                    <td>13326956541</td>
                    <td>西安交通大学</td>
                </tr>
                <tr>
                    <td>1004</td>
                    <td>雷军</td>
                    <td>15619851265</td>
                    <td>武汉大学</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">
                        备注:他们都是有钱人。
                    </td>
                </tr>
            </tfoot>
        </table>

## 框架

 <iframe src="https://www.sina.com.cn" height="600" width="400"
            frameborder="0"></iframe>
        <iframe src="https://www.sohu.com" height="600" width="400"
            frameborder="0"></iframe>

## 表单

 <form action="" method="post">
            <p>
                账号:<input type="text">
            </p>
            <p>
                密码:<input type="password">
            </p>
            <p>
                性别:
                <input type="radio" name="gender">男
                <input type="radio" name="gender" checked>女
            </p>
            <p>
                地址:
                <select>
                    <option value="">请选择省</option>
                    <option value="">吉林省</option>
                    <option value="">北京市</option>
                </select>
                <select>
                    <option value="">请选择市</option>
                    <option value="">长春市</option>
                    <option value="">北京市</option>
                </select>
                <select>
                    <option value="">请选择区</option>
                    <option value="">南关区</option>
                    <option value="">西城区</option>
                </select>
            </p>
            <p>
                爱好:
                <input type="checkbox" checked>读书
                <input type="checkbox">游泳
                <input type="checkbox" checked>跑步
            </p>
            <p>
                <textarea cols="30" rows="10"></textarea>
            </p>
            <p>
                邮箱:<input type="email">
            </p>
            <p>
                薪水:<input type="number">
            </p>
            <p>
                头像:<input type="file">
            </p>
            <p>
                颜色:<input type="color">
            </p>
            <p>
                电话:<input type="tel">
            </p>
            <p>
                隐藏:<input type="hidden">
            </p>
            <p>
                <!-- <input type="submit">
                <input type="reset">
                <input type="button" value="自定义按钮">
             -->
                <button type="submit">注册</button>
                <button type="reset">重写</button>
                <button type="button">自定义</button>
            </p>
        </form>

我们项目的要求:
如果有form,用input
如果没有form,用button

*   action:数据的提交后台地址
*   method:数据的提交方式

get:默认值,会把所有要提交的数据拼接在地址栏(不安全,有限制)
post:封装在一个请求体,把数据提交给后台,不会拼接在地址栏(安全,无限制)

*   readonly和disable的区别

readonly:可以提交到后台
disable:不能提交到后台

### 转义字符

*   &nbsp:空格
*   &amp:and符号、
*   &lt:小于号
*   &gt:大于号
*   &copy:版权号

## 网页

HTML文档描述的是网页
HTML文档包含HTNL的标签和纯文本
HTML文档被称为网页
HTML其实就是纯文本文档

## HTML头部

head元素包含了所有的头部信息元素
script,link以及各种meta,title,base

### title

定义了浏览器工具栏的标题,网页被收藏到收藏夹显示的默认标题,显示在搜索引擎结果界面的标题

### base

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

### link

引用css层叠样式表

### style

定义css层叠样式表

### script

即可以定义script脚本,也可以引用script文件,不建议写在head中,写在body的最下方

### meta

元数据,指定网页的描述,关键词,文件的最后修改时间,作者
可以定义搜索引擎的关键词

## HTML5

1999年HTML4.01里程碑版本,在HTML4.01中的几个人标签已经被废弃,这些元素在HTML5里有的被删除了,有的被重新定义,HTML5在2012年形成稳定的版本

### H5新增功能

*   画布
*   多媒体

1)定义音频内容:<audio src="音频地址" autoplay controls></audio>
2)定义视频内容:<video src="视频地址" autoplay controls></video>

*   重力感应
*   地图
*   websocket

### HTML浏览器兼容性

IE9之前几乎不支持H5

# CSS

CSS层叠样式表-----------定义如何显示HTML元素(样式),样式通常存储到样式表中
把样式表添加到HTML中,内容和表现分离(样式和结构分离)
外部样式表可以极大提高工作效率
外部样式表通常存储到CSS文件中

## CSS样式

### 行内样式

<p style="background-color: red;">我是P标签</p>
        <h1>我是h1标签</h1>
        <span>我是span标签</span>
        <a href="#">我是超级链接</a>

### 内嵌样式(内联样式)style

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

### 外部样式 link引入CSS文件

 <link rel="stylesheet" href="css/style.css">

## CSS选择器

选择你想要的元素

### 类选择器

.名{}
在使用·类选择器旋择css样式时,可以选择多个,中间用空格隔开即可

### id选择器

#名{}
每个标签原属的id是唯一的,不能重复

### 标签选择器

标签名{}

### 通配符,全部选择器

*{}
页面初始化

### 组合选择器

字段一,字段二{}

### 后代选择器

*   要字段一里的字段二改变样式-----所有

字段一 字段二{}

### 子选择器

*   要字段一里的字段二改变样式------直系第一级子代

字段一>字段二{}

### 紧跟着

*   要字段一里的字段二改变样式-----紧跟着字段一的字段二

字段一+字段二{}

### 属性选择器

*   input[属性]{}
*   input[属性 = 赋值]{}

### 伪类选择器

*   初始状态

名:link{}

*   激活状态

名:active

*   鼠标悬停

名:hover

*   访问过的

名:visited

*   获得焦点

input:focus{}

###运行结果

 

 

标签:22,样式,标签,08,字段,HTML,刘禹彤,选择器,###
来源: https://www.cnblogs.com/lyt0612/p/16613882.html