HTML+CSS基础学习笔记

最新推荐文章于 2022-12-10 00:51:11 发布

Asting_girl

最新推荐文章于 2022-12-10 00:51:11 发布

阅读量608

点赞数

文章标签： web

本文链接：https://blog.csdn.net/Asting_girl/article/details/107498314

版权

学习笔记0704D1-1
今日学习内容
1 VScode中html代码无法自动补全，更改方式参考
https://jingyan.baidu.com/article/215817f735e2675eda1423a5.html
2 HTML速写之Emmet语法规则，需要在后续联系中不断使用
2.1 ！=>tab 快速生成html基础结构
2.2 ID指令是 #；class指令是 .
2.3 子节点（>），兄弟节点（+），上级节点（^）

div>ul>li

div+ul+li

div>ul^li (li为ul的上级节点，所以是div的兄弟节点)

2.4 为重复 P4结果

2.5 分组（） div>(ul>li>a)+div>p

2.6 []属性 a[href=’###’ name=‘xiaoA’]

2.7 编号 $ （ $代表一位数，$ $ $为三位数） u l > l i . t e s t$ @3*3 @3指从3开始编号,*3表编3个号

ul>li.test$$$@3*4

2.8 文本 {} 可和 $一起使用 u l > l i . t e s t$ @3*3{加油$@6}

2.9 隐式标签没有指令，部分标签可以不输入标签，直接输入指令，即可识别父类标签
li：用于 ul 和 ol 中
tr：用于 table、tbody、thead 和 tfoot 中
td：用于 tr 中
option：用于 select 和 optgroup 中
例如 ul>.test $KaTeX parse error: Expected '}', got 'EOF' at end of input: @3*3{加油$ @6}的效果等于ul>li.test $KaTeX parse error: Expected '}', got 'EOF' at end of input: @3*3{加油$ @6}

学习笔记0704D1-2
前端学习路线 HTML5基础 → CSS3基础 → H5C3提高 → 做一个项目
今日学习内容 HTML5基础
1.HTML含义
超文本标记语言，它是一种标识性语言，非编程语言，不能使用逻辑运算，通过标签将网上的的文档格式进行统一，使分散的网络资源连接为一个逻辑整体。
超文本：是一种组织信息的方法，通过超级链接将多种媒介关联起来。
标记：标签，用<>包裹的具有一定含义的内容
网页分为静态网页业和动态网页
五大主流浏览器：IE ,FireFox,Chorme,Opera.safari
浏览器内核：
常用的开发工具：subline，HBuilder，VScode，Atom，Webstorm
2.HTML基本结构：

html标签这里开始的，然后到结束 head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见） body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见） 3.标签分块级标签和行级（内联）两种块级独占一行，识别宽高，如果不设置，高度为整行宽度，高度为内容实际高度；行级不独占一行，不能设置宽高，宽高分别为内容实际的宽高；块级标签可以通过设置样式：display:inline；转换为行级标签，行级标签可以通过设置样式：display:block；转换为块级标签学过的块级标签： div,p,h1-h6,ul,ol,pre,table,address等行级标签： span,a,b,strong,i,em,sup,sub img属于行级块标签，相当于执行了display:inline-block;操作作业：完成图示网页制作明日笔记中提交0704作业

学习笔记0705D2
常用标签
注释 CTRL+K+C 取消注释 CTRL+K+U

一级标题

二级标题

. .

六级标题

段落标签文字会独占一行

文字出现斜体效果 文字出现加粗效果
换行标记单标记

水平线单标记；一个空格 1.做一个新闻列表百度新闻--时尚新闻

科技

时髦词典|听我的！
巴黎时装周将上线开幕
跨界梦想——从航天飞行到地表驰骋

挚爱时光，感谢有你浪琴表新年甄选，邀你共许愿望清单

    </li>
</ul>

<ol>
    <li>
        <a href="http://baijiahao.baidu.com/s?id=1644476097840842695">时髦词典|听我的！</a>
    </li>
    <li>
        <a href="http://baijiahao.baidu.com/s?id=1671363529846272112">巴黎时装周将上线开幕</a>
    </li>
    <li>
        <a href="http://www.gq.com.cn/auto/player/news_16g490bdcc353688.html?utm_source=baidunews&utm_medium=syn_OG&utm_content=&utm_campaign=regular">跨界梦想——从航天飞行到地表驰骋</a>
    </li>
    <li>
        <a href="http://www.vogue.com.cn/jewelry-watch/news/pic_111gdb4973674cc3.html#id-1">挚爱时光，感谢有你 浪琴表新年甄选，邀你共许愿望清单</a>

    </li>
</ol>

以上内容主要用到:
时髦词典|听我的！

<ul>
    <li>
        列表项目
    </li>
</ul>

<ol>
    <li>
        列表项目
    </li>
</ol>

2.图片的使用
主要有4个tips：1.改图片时只改width图片高度会自适应缩放；2.width=”100%”可铺满整个页面宽度； 3.hight同理；4.
3.如何下载图片及切图
下载：按f12->打开elements->点击左上角的选择按钮，选择这张图片->可以看到相应代码部分被选中了->网页右下方可以看到图片下载地址->open in new tab->可保存图片
切图; ps→ 切片工具→ Ctrl+shift+alt+s→png24→透明度选上→存储→所有用户切片
4.关于超链接的补充
在新的页面打开链接，而不是覆盖本页面，可以用标签 target="_blank"
5.关于无序列表 ul
实心圆（默认）type=“disc”
空心圆type=“circle”
实心方块type=“square”
6.关于有序列表 ol
数字（默认）type=“1”
大/小写字母 type=“A/a”
大/小写罗马字母type=“I/i”
7.一些补充
~~del标签给文字加删除线~~

sup标签把文字变成上标

10 ²
u标签给文字加下划线
文字居中

8.做一个百度网盘界面
绝对地址：在任何情况下，都可以找得到的地址
相对地址：举例：我家楼上的楼上

index.html源码

百度网盘

one two

one.html源码 one

Two.html two

    <a href="../index.html">
        <img src="../img/return.jpg" width="60">
    </a>
</p> 
<p>
    <a href="three/three.html">
        <img src="../img/u=2744048561,2460905734&fm=26&gp=0.jpg" alt="">three
    </a>
    <img src="../img/4.jpg" width="150">
    <img src="../img/5.jpg" width="150">
    <img src="../img/6.jpg" width="150">
</p>

Three.html three

    <a href="../two.html">
        <img src="../../img/return.jpg" width="60">
    </a>
</p> 
<p>
    
    <img src="../../img/8.jpg" width="150">
    <img src="../../img/7.jpg" width="150">
</p>

今日学习总结：
使用各种标签来编写一个静态网页，以及熟悉各种快捷键操作，
在制作网页过程中，理清相对路径，网页可按预期运行，暂未遇到难处理问题。
明日学习计划：
结束html基础课程

学习笔记0706D3
1.表格的制作

Border表示边框 cellspacing表示单元格间隙

	初级	中级	高级	专家
标准	被产品怼的说不上话	跟产品互怼不相上下	怼的产品没话说	直接将其怼辞职
用户A
用户B

表格

表示一行表示单元格表示一列 border 表示边框属性 cellspacing 单元格空隙 align 对齐方式

    <tr align="center">
        <td></td>
        <td>初级</td>
        <td>中级</td>
        <td>高级</td>
        <td>专家</td>
    </tr>
    <tr align="center">
        <td>标准</td>
        <td>被产品怼的说不上话</td>
        <td>跟产品互怼不相上下</td>
        <td>怼的产品没话说</td>
        <td>直接将其怼辞职</td>
    </tr>  
    <tr align="center">
        <td>用户A</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr align="center">
        <td>用户B</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

    
</table>

11.简历的制作

   </tr>
   <tr height="40px" align="center">
       <td>姓名</td>
       <td></td>
       <td>性别</td>
       <td></td>
       <td>年龄</td>
       <td></td>
       <td rouspan="4">照片</td>
   </tr>
   <tr height="40px" align="center">
       <td>学历</td>
       <td></td>
       <td>籍贯</td>
       <td colspan="3"></td>
   </tr>
   <tr height="40px" align="center">
       <td>电话</td>
       <td></td>
       <td>政治面貌</td>
       <td colspan="3"></td>      
   </tr>
   <tr height="40px" align="center">
       <td>毕业院校</td>
       <td colspan="5"></td>  
   </tr>
   <tr height="40px" align="center">
       <td>求职意向</td>
       <td colspan="6"></td>   
   </tr>

个人简历

Colspan 行合并 rowspan 列合并
td标签换成th标签，文字可加粗显示，th=加粗并水平居中的td
colgroup标签

超链接不能嵌套超链接 P标签不能嵌套p标签标题标签h不能互相嵌套

13.登录表单
<Input type=” text/password/button/radio单选/checkbox复选/submit提交/reset重置/file文本选择框”

            </tr>
            <tr height="40px">
                <td align="right">用户名</td>
                <td>
                    <input type="text" name="loginame">
                </td>
            </tr>
            <tr height="40px">
                <td align="right">密码</td>
                <td>
                    <input type="password" name="pwd">
                </td>
            </tr>
            <tr height="40px">
                <td colspan="2" align="center">
                    <input type="button" value="提交">
                    <input type="reset" value="重置">
                </td>     
            </tr>
        </tbody>
    </table>
</form>

总体信息

表单数据提交的地址所有需要提交的数据，input必须有name属性 Input按钮的文字，使用value属性表示 Input必须放在form标签内才能生效 14.Get/Post请求

</p>
<p>
    <input type="password" name="pass">
</p>
<p>
    <input type="submit">
</p>
</form>

既然get和post只是在传递数据的方式上有所不同，那是否意味着无论获取数据还是提交数据两种方式可以混用呢？可以混用，但不建议使用，例如：上传图片
Get请求通常标示获取数据
Post请求通常表示提交数据
Get请求发送的数据都写在地址栏上，用户可见、
Post请求发送的数据用户不可见
Get请求不能提交大量数据，但post可以，因此不要混用。
学习笔记0706D3
16.容器的使用
Text-align:center; 让内部元素水平居中
Margin:auto; 让容器水平居中
Background-color:gray; 设定背景颜色
Font-size:24px; 设定字体大小
Color：white；设定字体颜色
Span,一个容器，不具备任何功能，仅当做容器来使用，用于包裹一段文本，便于给文本增加样式
Div：一个通用容器标签，不具备任何特殊功能，仅当做容器来使用，也可以容器直接相互包裹。
Div比span范围大
例子：

中国农业大学

中国农业大学（China Agricultural University），简称“中国农大”（CAU） 坐落于北京市，学校是中华人民共和国教育部直属，中华人民共和国水利部、原中华人民共和国农业部和北京市共建的一所全国重点大学，位列 “双一流”建设高校、“985工程”、“211工程”，入选“2011计划”、 “111计划”、卓越工程师教育培养计划、卓越农林人才教育培养计划、国家建设高水平大学公派研究生项目、中国政府奖学金来华留学生接收院校、国家大学生文化素质教育基地，为中国―加州大学系统"10+10" 合作科研联盟成员高校。 [1-3]

中国农业大学肇始于1905年成立的京师大学堂农科大学。1949年9月，北京大学农学院、清华大学农学院和华北大学农学院合并成立北京农业大学。1952年10月，北京农业大学农业机械系与华北农业机械专科学校、中央农业部机耕学校合并成立北京机械化农业学院，同年11月，平原农学院并入北京机械化农业学院， 1953年7月更名为北京农业机械化学院，1985年10月更名为北京农业工程大学。1995年9月，北京农业大学和北京农业工程大学合并组建中国农业大学 。

截至2019年12月，学校占地125万平方米，校舍面积123万平方米；设有19个学院，开办本科专业66个；有全日制本科生12182名，全日制研究生8930名；有专任教师1860人；有一级学科博士学位授权点21个、一级学科硕士学位授权点32个；馆藏图书近200万册。 [4]

17.布局与选择器
Banner 横幅
Navigation 导航
Bottom 底部
Div容器的特点：空的div，默认宽度是100%，高度为0
CSS内部样式：
css选择器：class可以重复使用，id表示身份，id选择器只能用一次不允许重复。
Id选择器#id{}
类选择器.类名{}

猿辅导

    <div id="banner">
        <img src="../vscode/D4-CSS/img/yuanfudao1.png"  >
    </div>
    <div id="navigation" >
        <img src="./D4-CSS/img/yuanfudao2.svg" ><a href="https://www.yuanfudao.com/index/home" class="nav" ">猿辅导</a>
        <img src="../vscode/D4-CSS/img/yuan3.svg"  ><a href="http://yuantiku.com/" class="nav" ">猿题库</a>
        <img src="../vscode/D4-CSS/img/yuan4.svg" ><a href="http://www.yuansouti.com/" class="nav" >小猿搜题</a>
    </div>
    <div id="bottom">
        京ICP备12032703号|京ICP证130009号|京公网安备11010502033993|教APP备1100012号|京网文（2018）2754-286号|北京猿力教育科技有限公司 版权所有
    </div>

注意：将body中的style，提取到css样式中间时候，可能格式不一致，注意审查例如：width=""→width: ; 运行结果：

18.样式表的层叠
在实际网页开发中，作用于同一个元素上的多个样式产生冲突的情况不可避免的经常发生，当多个样式发生重叠时，优先级别高的样式会生效
行内样式表优先级>内部样式表优先级

猿辅导猿题库小猿搜题校园口算斑马AI课猿编程

</div>
<div id="banner">
    <img src="img/yuanfudao1.png" alt="">
</div>
<div id="bottom">
    京ICP备12032703号|京ICP证130009号|京公网安备11010502033993|教APP备1100012号|京网文（2018）2754-286号|北京猿力教育科技有限公司 版权所有
</div>

19.选择器的权重
做后面一杠竖线的时候，可以用border-right标签
对比优先级 1.权重值：行内样式1000>ID选择器100>类选择器10>标签选择器1>通用选择器0
例如：#box p .tt 100+1+10=111
2.选择器选择的范围越小越精确，优先级就越高
补充：dashed虚线
20.css文本属性
color: red;/文字的颜色/
font-family: “华文中宋”;/字体类型/
font-size: large;/字体大小/
font-weight: bold;/字体加粗/
font-style: italic;/文字倾斜/
text-indent: 60px;/首行缩进/
text-align: center;/水平对齐方式/
line-height: 100px;/行高/
height: 100px;line-height: 100px;/垂直居中/
text-decoration: underline;/文本修饰/

21.常见图片格式的区别
Jpg gif png都属于压缩格式
Gif：支持动画，只有全透明和不透明两种模式
Png：采用无损压缩算法，体积相对较小，支持背景透明，不支持动画
Svg：颜色及形状相对简单的图像

学习笔记0709D4
22.背景图片的使用

<title>background</title>

！！！写url地址的时候，需要手动加引号

24.元素浮动布局
浮动元素会脱离网页文档，与其他元素发生重叠，但是，不会与文字内容发生重叠
利用浮动元素，可以制造文字环绕效果，文字横向排版
float: left;
float: right;
每个容器都设置float就会实现横向排列

文字环绕效果

文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕

</div>
<p>
    横向排版布局
</p>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

25.浮动元素中
Background：color；url（）；
解决重叠：
加一个父元素，相当于用一个大的容器把小的容器封装起来了
父元素需要设置高度；可以设置overflow：auto； overfilow表示溢出；clear：left/right/both

<div class="outer">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>   

<div class="hh"></div>

Clear：both 最常见的应用场景是聊天框的消息排列 26.浮动元素下浮动元素在排列时，只参考前一个元素位置即可

右浮动相当于镜面效果

浮动元素不会覆盖文字内容
浮动元素不会覆盖图片内容
（因为图片本身也属于文本，可以图片看做是一个特殊文字）
浮动元素不会覆盖表单元素
（输入框、单选按钮、复选框、按钮、下拉选择框等）
27.盒子模型

28.盒子模型下所谓的填充padding，就是指向一个元素的内部，增加空间，也可以称为 “内边距”；和外边距margin不同的是，填充会改变元素的大小，随着填充的增加，元素会被撑大 Document

总结：url路径很重要，有的情况下需要手动加引号’ ’或者” ”,如果找不到路径的情况下，可以退回上级文件…/ 逐级寻找路径

29.布局练习

Document

case

！！！问题：div item-wrapper 无法水平居中，导致item内部三个模块无法在页面居中，还未找到错误代码

30.css属性简写
Background
background-color: ;/背景色/
background-image: ;/背景图片/
background-repeat: ;/背景图平铺方式/
background: gray url() no-repeat;
border
border-width: ;
border-style: ;
border-color: ;

        border: 1px solid #d3f420;/*颜色默认为黑色*/

font
font-style: italic/斜体/;
font-weight: bold/加粗/;
font-family: arial/默认字体/ sans-serif/备用字体/;/字体种类/
font-size: ;
line-height: ;/行高/

        font: italic/*斜体*/ bold/*加粗*/ 20px arial/*默认字体*/ sans-serif/*备用字体*/"微软雅黑"/*备用字体*/;

margin/边距/
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

        margin: 10px 15px 10px 15px;/*上 右 下 左*/
        margin: 10px 15px 10px；/*上 左右 下*/
        margin: 10px 15px;/*上下 左右*/
        margin: 10px；/*上下左右*/

padding/填充/
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

        padding: 10px 15px 10px 15px;/*上 右 下 左*/
        padding: 10px 15px 10px；/*上 左右 下*/
        padding: 10px 15px;/*上下 左右*/
        padding: 10px；/*上下左右*/

31.外部样式
1.Name.css
怎么引入外部样式呢

标签当前页面与外部资源的映射关系通过link标签引入外部样式，rel 属性指定资源跟页面的关系，href属性是资源的地址 Document

这是一个块

Commen.css div { width: 100px;background-color: red;height: 100px; }

2.@import
这种方式有很多问题，不建议使用

Link和import区别：
https://www.cnblogs.com/my–sunshine/p/6872224.html

总结：html和css基础班已经学完，课题组项目暂时不需要绚丽的前端页面，故下一步开始学JavaScript，html和css强化课程可在项目过程中学习。

Asting_girl

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS基础学习笔记

学习笔记0704D1-1今日学习内容1 VScode中html代码无法自动补全，更改方式参考https://jingyan.baidu.com/article/215817f735e2675eda1423a5.html2 HTML速写之Emmet语法规则，需要在后续联系中不断使用2.1 ！=>tab 快速生成html基础结构2.2 ID指令是 #；class指令是 .2.3 子节点（>），兄弟节点（+），上级节点（^）div>ul>lidiv+ul+lidiv&g
复制链接

扫一扫