html自学笔记day1

最新推荐文章于 2024-10-01 23:23:32 发布

Hooh1yzzzz

最新推荐文章于 2024-10-01 23:23:32 发布

阅读量134

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_53624763/article/details/125379346

版权

一、html

1.1、概念

html: hyper text markup language,超文本标记语言

可以在文本中嵌入超链接、表格、表单等

页面中的内容都由标记组成

标记（标签）：

1.单标记：只有开始标记

<input>输入
<dr>换行
<hr>水平线
<img>图片

2.双标记：由开始标记和结束标记组成

<a></a>超链接
<p></p>段落
<table></table>表格

1.2、特点

1.html文件名的后缀（扩展名）是.html或者.tml

2.由标签组成

3.html页面由浏览器解释运行，不能内核的浏览器解析能力不同

1.3、常见标签

图片标签：

<img>

超链接标签：

<a></a>

表单标签：form

<form></form>

属性

二、css

2.1、概念

css：cascading style sheet，层级（层叠、级联）样式表

作用：美化页面，统一了标签样式的设置方式

2.2、css的写法

内联样式：

在页面的head标签中，写style标签，在style标签中找到要设置样式的标签，并写上样式属性

<标签名 style="属性名:属性值;属性名:属性值;..."></标签名>

内部样式表：

在页面的head标签中，写style标签，在style标签中找到要设置样式的标签，并写上样式属性。

<head>
    <style>
    选择器{
      属性名:属性值;
      属性名:属性值;
      ...
  }
    </style>
</head>

外部样式表：

创建一个css文件，在该文件中找到要设置样式的标签，并写上样式属性，写法同内部样式表；

在需要使用这些样式属性的html页面中，使用link标签的href属性引入这个css文件

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

2.3、选择器

选择器：用于定位到指定标签的模式

元素选择器：选择指定元素名（标签名）的标签

标签名{
    属性名:属性值;
    属性名:属性值;
    ...
}

id选择器：选择指定id的标签

先要为标签添加id属性

#id值{
    属性名:属性值;
    属性名:属性值;
    ...
}

类选择器：选择指定class的标签

先要为标签添加class属性

.class值{
    属性名:属性值;
    属性名:属性值;
    ...
}

分组选择器：可以对多个选择器所选择的标签进行统一样式的设置

选择器1,选择器2,...{
    属性名:属性值;
    属性名:属性值;
    ...
}

通配符选择器：选择当前页面中的所有标签

*{
    属性名:属性值;
    属性名:属性值;
    ...
}

2.4、常见样式

字体大小：font-size
字体颜色：color
字体粗细：font-weight
字体样式：font-family
装饰线：text-decoration
边框：border
内边距：padding
外边距：margin
背景色：background

三、js

3.1、概念

js：java script

作用：使页面具有交互性

3.2、js的写法

内嵌式：

在head标签中，写script标签，在script标签中洗js代码

外联式：

创建一个js文件，在该文件中编写js代码；

在需要使用该文件的页面中，使用script标签的src属性引入该文件

3.3、js基础语法

3.3.1、变量

语法：

1.先定义后赋值

var 变量名：
变量名 = 值 ；

2.定义的同时赋值

var 变量名 = 值；

注：

定义变量但没有赋值，使用这个变量，这个变量的值是underfined
变量的类型由值确定
定义变量时省略了var，那么这个变量是全局变量

3.3.2、运算符

算数运算符
```
+、-、*、/、%、++、--
```

比较（关系）运算符

>,<,>=,<=,!=
==:比较数据
===：比较数据和类型

逻辑运算符
```
&&、||、!、^
```
赋值运算符
```
+=、-=、*=、/=、%*
```
举例 a +=3;等价于a = a+3
三元运算符
```
表达式1?表达式2：表达式3
```

3.3.3、流程控制

1.判断结构：if、else

//单if结构
if(条件){
    语句
}
//标准的if-else结构
if(条件){
    语句a
}else{
    语句b
}
// 多条件的if-else
if(条件1){
   语句a
}else if(条件2){
   语句b
}else if(条件3){
   语句c
}else if(条件4){
   语句d
}
...
else{
    语句n
}

2.分支结构：switch、case、break、default

// 多条件的if-else
if(条件1){
   语句a
}else if(条件2){
   语句b
}else if(条件3){
   语句c
}else if(条件4){
   语句d
}
...
else{
    语句n
}

3.循环结构：while、do、while、for

while(条件){
    循环体
}
do{
    循环体
}while(条件)
for(初始化①;条件②;步进表达式③)
    {
        循环体④
    }
执行顺序：124324324... 2

Hooh1yzzzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫