学习前端html5和css3笔记一

小瑜蔬食

已于 2023-03-03 15:07:13 修改

阅读量220

点赞数

文章标签： html5 css css3 前端前端框架 Powered by 金山文档

于 2023-01-17 21:32:14 首次发布

本文链接：https://blog.csdn.net/weixin_53178802/article/details/128720389

版权

1- vscode编译器和Typora的快捷键使用

       01- 注释：ctrl+/                          
       02- 复制当前行到下一行  shift+alt+↓    
       03- 复制当前行到上一行  shift+alt+↑       
       04- ctrl+F 查找 -->                            
       05- ctrl+H 替换 -->                            
       06- 同时写多行 alt+鼠标左键点击产生光标 

       07- Typora快捷键整合
    Ctrl+1  一阶标题    Ctrl+B  字体加粗
    Ctrl+2  二阶标题    Ctrl+I  字体倾斜
    Ctrl+3  三阶标题    Ctrl+U  下划线
    Ctrl+4  四阶标题    Ctrl+Home   返回Typora顶部
    Ctrl+5  五阶标题    Ctrl+End    返回Typora底部
    Ctrl+6  六阶标题    Ctrl+T  创建表格
    Ctrl+L  选中某句话   Ctrl+K  创建超链接
    Ctrl+D  选中某个单词  Ctrl+F  搜索
    Ctrl+E  选中相同格式的文字   Ctrl+H  搜索并替换
    Alt+Shift+5 删除线 Ctrl+Shift+I    插入图片
    Ctrl+Shift+M    公式块 Ctrl+Shift+Q    引用
    注：一些实体符号需要在实体符号之前加”\”才能够显示

2- 网页三层结构

01- html-结构层--拥有什么
02- css-表示层--拥有的东西什么样子
03- js-行为层--用户的行为（编程语言，可以计算）

3- HTML语言

01- html定义:hyper text markup language  超文本标记语言，不是编程语言
02- html文档(扩展名或者后缀名)
  .txt .doc .xls（文本）
03- html基本语法,标签结构
    .双标签（也就是开始标签开始，结束标签结束标签，可以写内容）, <开始标签> 内容 </结束标签>
    .单标签（也就是空标签，没有办法写内容）,在开始标签中结束，没有结束标签,<关键字>
    .空标签内容没有任何内容标签多用来占位，像<input />框，没有属性的话是没有值的。仅一个空标签做不了什么事情。
04- 标签属性
<cl name='ry' age='16' profession='actor'></cl>
name、age等属性只能写在开始标签中，不能写在结束标签中

4- html基本结构

<!-- 写英文的html选择html：5 -->
<!-- shift + ！ 打出 ! 直接回车(英文模式) -->
<!-- Alt+B是在浏览器打开网页 -->
<!-- Shift+Alt+B就是选择其它的浏览器打开 -->

<!-- 在网页右键选择查看网页源代码就可以查看到写的代码了 -->

<!-- 注释的写法 ctrl + / --> 

<!-- 声明文档类型，告诉浏览器以哪种规范来解析文档，这是Html5的写法，不是标签，写在文档最上方 -->
<!-- html是文档最大的标签 -->
<!DOCTYPE html>

<html lang="en">

<!-- head 包含元信息，css样式属性，js语言，标题 -->    
<head>
 
<!-- 字符编码
       gb2312 中文简体
       GBK 中文简体&繁体
       UTF-8 万国码，中文，英文，西班牙语，日文，韩文，法语 -->
   <meta charset="UTF-8">
    
   <!-- 窗口信息配置 -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
   <!-- 标题 -->
   <title>你好</title>
    
</head>
<body>
   <!-- body 身体部分，包含所有页面呈现的结构标签 -->
</body>
</html>

5- 常用标签

A. 常用块级标签及特点

01-  div（盒子、块）
最常用的块级标签（上下不会空出空来）
网页应用场景


02- p（盒子、块）
段落标签（上下两个会空出空来）


03- h1-h6标题标签
特点：垂直上下排列，独立成行

04- 其它
常见的块级元素有:ul、li、dl dt dd、table、form

B- 常用内联标签及特点(行内标签)

01- 行内特点: .和相邻行内元素在同一行,但是之间会有空白缝隙。
             .默认宽度是他本身内容的宽度。
             .宽度、高度、行高、外边距以及内边距都可以手动设置。
02- 行内标签span:
特点：默认在一行横行排列，超出一行会折行,行内标签span标签的宽高默认就是内容的宽高

03- 其它行内标签：a、img、b、strong、i、em、lebel、sub、sup、del、input、button

04- 常见的行内块级元素有:img、input、td

05- a标签可以嵌套所有标签但是它不能嵌套它自己

C- 其它标签

01- br     
换行标签  eg:
一<br>二

02- hr 
水平分隔线

6- 列表

A.HTML 支持无序、有序和定义列表

01- 无序列表ul li
无序列表是一个项目的列表，此列项目默认使用粗体圆点（典型的小黑圆圈）进行标记。
去掉项目符号：style样式：list-style:none
type属性定义列表符号样式 ：
disc(实心圆)
circle(空心圆)
square(实心方块)

<ul>
<li>html5</li>
<li>css3</li>
<li>js</li>
</ul>

<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>Js</li>
</ul>

<ul style="list-style:none">
<li>html5</li>
<li>css3</li>
<li>js</li>
</ul>

02- 有序列表ol li,也是一个项目的列表，列表项目默认使用数字进行标记。
注：ol和li也是固定搭配，ol里面不能添加li之外的别的标签，但是li里面可以嵌套加标签。
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Js</li>
</ol>   

<ol type="1"reversed > 
     <!-- 有序列表type：1、A、a、I、i  start：从第几个开始 -->
     <li>html5,css3</li>
     <li>js交互</li>
     <li>jq</li>
     </ol>  

<ol type="I"reversed > 
     <!-- 有序列表type：1、A、a、I、i  start：从第几个开始 -->
     <li>html5,css3</li>
     <li>js交互</li>
     <li>jq</li>
     </ol>  

<ol type="i"reversed style="list-style:none;"> 
<!-- 有序列表type：1、A、a、I、i  start：从第几个开始 -->
<li>html5,css3</li>
<li>js交互</li>
<li>jq</li>
</ol>

03- 自定义列表dl dt dd ,不仅仅是一列项目，而是项目及其注释（描述）的组合。dd 内容会默认缩进显示，意思就是前面会天然空格。
<dl>
<dt>HTML</dt>
<dd> 超文本标记语言 </dd>
<dt>CSS</dt>
<dd> 层叠样式表 </dd>
</dl>

<dl>
<!-- 自定义列表 -->
<dt>第一阶段</dt>
<!-- 项目-->
<dd>html5，css3</dd>
<!-- 描述（注释）dd标签会有天然的留白 -->
<dt>第二阶段
<dd>js交互，jquery</dd>
</dl>

7- 图像标签

- img （自带宽高属性）

- src 图片的路径（相对路径例如./和绝对路径）（绝对路径：网页里右键复制图像链接，复制粘贴到SRC里即可）

- width 图片宽度 （当只设定宽度时，高度会等比例缩放），可加单位px，也可不加单位px

- height 图片高度（设置宽高时可加style可不加style，因为img自带宽高属性），可加单位px，也可不加单位px

- alt 友好提示,当图片路径错误的时候才会显示

- title 标题，鼠标悬浮时显示

<img src="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500" 
alt="美景" width="200" height="200" title="树">

01- 相对路径（relative path）

相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系,常用的相对路径包括当前目录，上一级目录，下一级目录。

路径的语法格式：

（1）（/）：一个斜杠表示根目录（例如文件夹如果在D盘，D盘就是根目录）。

（2）（./）：一个点（.）后面跟一个斜杠表示当前目录，也就是当前文件所在目录。

（3）（../）：两个点（.）后跟一个斜杠表示前文件所在目录的上一级目录。

（4）（../../）：表示当前文件所在目录的上上级目录，以此类推。

02- 绝对路径(absolute path)

绝对路径文件在目录中的绝对位置完整描述，常见的绝对路径一种由其在网络上的绝对位置定义的位置，一种是本地从盘符出发的绝对位置

（1）网络绝对路径（完整的URL地址，包括协议和域名）：

网络图片地址：打开网页--右键---复制图像链接---粘贴到src=""内 

http://www.ujiuye.com/statics/images/logo.png

服务器能够将网址解析到服务器硬盘下logo.jpg图片文件。

<img src="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500" alt="" width="200" height="200" title="树">

（2）本地绝对地址（具体的盘符）：

本地磁盘地址：打开图片属性去复制位置再加上\图片名--粘贴到src=""内 

D:\webset\images\logo.jpg（本地磁盘地址：打图片属性去复制位置里的内容再加上\图片名.后缀比如\logo.jpg）

<img src="C:\Users\Lenovo\Desktop\一.web前端\1.软件&图片\图片\love.jpg" alt="" width="200" height="200" title="love">

8- 链接 a标签

01- HTML使用标签 <a>来设置超文本链接，超链接可以是一个字，一个词，或者一组词，也可以是一幅图。点击这些内容来跳转到新的文档或者当前文档中的某个部分。
02- 把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
03- 自带属性：
href: 链接的路径

target:  _self在当前页面跳转，默认就是

 _blank 打开新页面

 title属性定义提示文本，将鼠标悬停在链接上会显示标题作为工具提示。

04- 超链接类型
<!-- 超链接标签 -->
<!--   001- a标签的超链接
       002-  href是要跳转的路径
       003- target="_self "在当前页面跳转，是默认值
       004- target="_blank" 打开新页面
       005-  title=""鼠标移入上的时候显示，提示工具 -->                                                  
  <a href="https://www.baidu.com/" target="_blank" title="我是超链接要跳转">我要跳转到百度</a>

  <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%91%A9%E7%BE%AF%E5%BA%A7&fenlei=256&rsv_pq=0xf089848a0001ae56&rsv_t=c36bGxmSCFYCUz7I79z0%2BMsc5IzEFaT%2BexnYPAI8K%2F1fEBRDdxy5bt1e3F08&rqlang=en&rsv_enter=1&rsv_dl=ib&rsv_sug3=9&rsv_sug1=4&rsv_sug7=101"
  target="_self " title="点击查看摩羯座今日运势">
  <img src="./img/摩羯座.jpg" alt="" >
  </a>
  <!-- 006.a标签的空链接 #占位-->                               
  <a href="#">手机</a>
  <a href="#">电脑</a>  

05- 锚点链接

当我们点击锚点链接时，可以快速定位到当前页面中的某个位置。

同一页面的指定位置。

示例：

先写：锚点超链接：<a href="#box">写标题</a>

再写：目标：<p id="box">写内容</p>(id不要用数字开头不要用中文)

9- 标签之间的关系

01- 我们在书写div标签时通常有两种结构：并列结构和嵌套结构。
例如： 
<!-- 并列结构 （兄弟关系） -->             
<div style="width: 100px;height:100px;background-color:aqua">兄</div>
<div style="width: 100px;height:100px;background-color:rgb(12, 212, 22)">弟</div>

02- 我们在书写div标签时通常有两种结构：并列结构和嵌套结构。
例如： 
           
<!-- 嵌套关系 （父子关系） -->       
 <div style="width:400px;height:400px;background-color:pink">
    爸爸
    <div style="width:200px;height:200px;background-color:#909">儿子
      <img src="C:\Users\Lenovo\Desktop\一.web前端\1.软件&图片\图片\摩羯座.jpg"  alt="" width="100" height="100">
    </div>
  </div>

10- 语义化

01.概念：运用合适的标签和特定的属性去格式化文档（合适的场合用合适的标签和属性，合适的标签和属性用在合适的场合），比如<strong></strong>，<em></em>都是合适的标签，都具有语义化的效果。
02优点：
.易于开发和维护
.用户体验比较好
.易于seo,易于爬虫抓取关键字，能和搜索引擎建立良好的沟通
.即使在没有css样式的情况下，也能呈现良好的效果

11- html字符实体

01- 直接在vscode里面写小于号可能报错所以可以在下面网站里查快捷键代码复制粘贴即可

https://www.w3school.com.cn/html/html_entities.asp

& yen; 金钱符号￥

 <!-- 01- 字符实体 -->                                       
  1&lt;2
  <br>
  2&gt;1
  <br>
  珍爱地球&amp珍爱生命
  <br>
  小瑜蔬食&reg;
  <br>
  小瑜蔬食&copy;
  <br>
  小瑜蔬食&trade;
  <br>
  <!-- 02- &nbsp; 空格 -->                                    
  你&nbsp;&nbsp;&nbsp;&nbsp;好
  <br>
  <!-- 03- &yen; 金钱符号 -->                                  
  <span style="color: red;">&yen;999</span>