前端的基础

最新推荐文章于 2022-07-17 22:13:41 发布

深海鱼0110

最新推荐文章于 2022-07-17 22:13:41 发布

阅读量123

点赞数

分类专栏：蜗牛学前端

本文链接：https://blog.csdn.net/weixin_39193977/article/details/116017110

版权

蜗牛学前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端

前端的三把利器

把前端比作一个赤裸的人。

一、HTML（将这个人完成呈现出来）

html基础

元素

从标签的开始到标签的结束是一个元素

属性

HTML标签可以有属性

属性在开始标签中规定

属性都是以 name=“value” 形式出现的

常用的属性

align=“center” 是居中

新建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>420练习基础</title>
</head>
<body>
<h1>第一个标题</h1>
<p>第一个段落</p>
</body>
</html>

其中title是这个页面的名称，显示在浏览器页签上的

内是页面显示的内容

单个html文件只允许出现一对html标签。

自闭和标签和主动闭合标签

<!--    1、自闭和标签  <meta charset="UTF-8">-->
<!--    2、主动闭合标签 <title>射手座</title>-->

块级标签和行内标签

块级标签特点：无论自己内容有多大都占一整行。

行内标签特点：自己内容有多大就占多大。（无法应用宽、高、外边距、内边距)

白板标签

div和span没有被css修饰，所以称作白板标签

CSS基础

html添加css样式的方法：

html添加css样式有三种方法，分别为行内式（使用style属性，在特定的HTML标签内使用）、内嵌式（style标签把css代码放在特定页面的head部分中）、外联式（使用link标签，将外部css文件链接到HTML中）。

一、行内式

使用style属性在特定的HTML标记内设置CSS样式。

<span style="background-color: #3a8ee6">span的内容</span>

二、内嵌式

style标签把css代码放在特定页面的head部分中，再在body中进行对应的引用，例子是#id

<head>
    <meta charset="UTF-8">
    <title>420练习基础</title>
    <style>
        #id1{
            background-color: #5daf34;
        }
    </style>
</head>
<body >
	<div id="id1">div里面id是1的内容</div>
</body>

三、通过link标签导入css样式表

<link rel="stylesheet" href="cssDemo.css">

选择器

id选择器

代码约束 不允许一对html标签中存在多个相同的id属性
<div id="i1"></div>

Class选择器

允许多次出现，也就是允许复用

<div class="c1"></div>

应用多个样式

<div class="c1 c2" ></div>

标签选择器

标签选择器，全局设置，所有标签都应用这个样式。
<div></div>

属性选择器

div[name="ssz"]{
  width: 100px;
  height: 100px;
  background-color: green;
}
<div name="ssz"></div>

2.5、css优先级

style属性是最高优先级

以标签为基准，由近到远，由下到上。

2.6、基础css样式

居中

/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 100px;

三、JS（让这个人动起来。）

DOM

innerText 获取标签间的字符串。无论innerText赋值是普通字符串，还是具有标签的字符串，都会变成字符串放在div中间。

innerHtml 获取标签间的所有的内容。如果是特殊含义的字符串，如：那么就会变成一个元素。

3.1、创建标签

字符串创建

var demo = document.getElementById('create1')
demo.insertAdjacentHTML('afterEnd','<span>xxx</span>')

标签对象创建

var input = document.createElement('input')
var create = document.getElementById('create')
create.appendChild(input)

3.2、indexof实现和python的 in操作

indexOf 在获取到字符时，返回其角标，没有获取到则返回-1

通过判断-1可以判断某个字符是否在字符串内。

3.3

console.log() == print()

alert() js的弹框

深海鱼0110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的基础

前端前端的三把利器把前端比作一个赤裸的人。一、HTML（将这个人完成呈现出来）html基础元素从标签的开始到标签的结束是一个元素属性HTML标签可以有属性属性在开始标签中规定属性都是以 name=“value” 形式出现的常用的属性align=“center” 是居中新建一个HTML文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫