HTML+CSS学习笔记

最新推荐文章于 2023-09-25 15:24:06 发布

CSDNxiaodi

最新推荐文章于 2023-09-25 15:24:06 发布

阅读量72

点赞数

文章标签：前端学习笔记

本文链接：https://blog.csdn.net/CSDNxiaodi/article/details/130577302

版权

HTML

web标准：是一个标准的集合，结构标准（HTML统一），行为标准，（js统一），表现标准（css统一）。

1.1html基础

html：超文本标记（标签）语言。

html骨架格式

<html>
    <开始标签>
    <头部>
    <一般放入网页的一些属性，比如，网页的标题，一般不展示给用户>
    <head>
    <网页的标签>
    <title></title>
    </head>
     <主体部分>
      <body>
          <网页中的内容>
        </body>
          <结束标签>
</html>

1.2常用标签

1.标题标签

~

(文字大小依次减小)

2.段落标签

自动换行

3.水平线标签

（单标签，一条横线）

4.换行标签
(单标签，换行)

5.div span 标签

div span 没有语义，网页布局的主要两个盒子css+div。

div是组合网页span，跨度，跨距：范围

div—盒子，用来布局，块状元素。

span----内容，内联元素。

语言格式

这是头部

今日价格

1.3文本语义化标签

1.粗体

2.斜体

3.下划线

4.删除线

1.4 图片标签

1.标签属性

<标签名属性一=“属性一” 属性二=“属性二”…>内容</标签名>

2.路径：绝对路径和相对路径

相对路径：1.图片和当前文档在同一文件夹下。直接引用：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kIKs6wnV-1683605018047)(1.jpg)]

2.图片和当前文档在同一目录。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9v1yv3AZ-1683605018048)(目录名/1.jpg)]

3.图片在文档上级目录。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sT9MX0Gc-1683605018048)(…/1.jpg)]

绝对路径：把路径都写上。<img src="文件地址”>

3.标记属性

title: 鼠标悬停时显示的内容

alt: 图像不能显示时的替换文本

width：设置图像的宽度

height：设置图像的高度

border：设置图像边框的宽度

1.5锚点链接

1.使用创建链接文本

2.base 标签

base可以设置整体链接的打开状态，base写到之间

1.6特殊字符，列表

1）空格符

2）< 小于号 <

3）> 大于号 <

4）& 和号 &

5）￥人民币 ¥

7）℃ 摄氏度 °

```
 ±   正负号    &plusmn;
```
✖ 乘号 ×

10)➗ 除号 ÷

² 平方 2 ²
³ 立方 3 ³

1.7列表标签

1.无序列表ul

无序列表之间没有顺序之分，并列。

....
....

2.有序列表ol

列表之间有一定的顺序排列

....
.....

3.自定义列表

通常用于对术语或名词进行解释，定义列表的列表前没有任何项

名词

名词解释1

名词解释2

2HTML表格与表单

1.1表格标签

创建表格

单元格之间文字

一对tr中包含几对td，就表示有多少行

属性介绍

border 设置表格边框

cellspacing 设置单元格与单元格边框之间的空白间距

cellpadding 设置单元格内容与单元格之间的空白间距

width 设置表格的宽度

height 设置表格的高度

sign 设置表格在网页之间的水平对齐方式 left center right

表头单元格一般位于表格的第一行或第一列文本加粗居中，用th替换td即可设置表头

表格结构标签，默认居中，第一行

1.2合并单元格

跨行合并给td加rowspan属性

跨列合并给td加colspan属性

1.3表单

1.input

type属性

普通输入框（文本）：

密码框

单选按钮男,女<input type=“radio” name=""name2>

双选按钮唱跳

rap

普通按钮

size 正整数 input控件在页面中的显示宽度

checked 定义选择控件中默认被选择的选项

maxiength 控件允许输入的最多字符数

下拉菜单

使用select控件定义下拉菜单的基本格式

1 2

2.表单域

之间是表单域 form标签中的所有内容都会提交给服务器

css基础

rel属性，当前文件与被链接文件之间的关系

不同类型选择器

选择器名字	选择的内容	举例
元素选择器	所有指定该类型的HTML元素
ID选择器	具有特定的ID的元素
类选择器	具有特定类的元素
属性选择器	拥有特定属性的元素
伪选择器	特定状态下的特定元素	a:hover

padding：即内边距，围绕着内容（比如段落）的空间。

border：即边框，紧接着内边距的线。

margin：即外边距，围绕元素外部的空间。

width：元素的宽度

background-color：元素内容和内边距底下的颜色

color ：元素内容（通常是文本）的颜色

text-shadow：为元素内的文本设置阴影

display：设置元素的显示模式

width: 600px; —— 强制页面永远保持 600 像素宽。

margin: 0 auto;– margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方`

background-color: #FF9500;`—— 指定元素的背景颜色

padding: 0 20px 20px 20px; —— 内边距设置了四个值来让内容四周产生空隙

border: 5px solid black;——5 像素的黑色实线边框。

js知识

js的基本结构

1.数据类型

string：字符串

number：数值类型

boolean：真假

object：复杂数据

Null：空间的引用

undefined：未定义

2.赋值弹窗

var num= ；

var num=prompt（” “）;

alert(" ");

console.log( );

3.条件语句

if 指定条件为true时，使用if语句执行

if-else true时执行，false时执行其他代码

switch

4.不同类型循环

常见三种循环：for while do while

for：1.表明循环变量的值 2.判断循环条件 3.更新循环变量的值

while：执行条件为true的代码块

do/while 先执行再判断同while相同

5. Break和continue

break：跳出本层循环执行循环后面的代码，只能跳出一层循环

ole.log( );