001_前端基础

最新推荐文章于 2024-10-10 20:18:33 发布

讨厌社长.

最新推荐文章于 2024-10-10 20:18:33 发布

阅读量93

点赞数

分类专栏：软件杯相关学习

yuyan_lijin

本文链接：https://blog.csdn.net/qq_51066730/article/details/110520029

版权

软件杯相关学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

网页项目：

一、构建网页展示内容

网页三剑客：html CSS JavaScript

html：网页内容

1.概述

超文本标记语言，用一些具有特殊含义的单词来标记具体的功能，我们把这样的标记称为标签或者元素。

大多数元素都是成对出现的
```
    <tag></tag>
```
也存在没有结束的标记
```
   <tag>   
```
我们也可以把没有结束标记写为

如果成对出现的标签 ,可以嵌套其他标签 , 不嵌套也可以

   <tag> 
      <tag1></tag1>
  <tag2>
   </tag>

标签出现的形式 : 标签和标签之间

包含 : 一个标签包含另一个标签父子关系
并列 :他们隶属一个父标签他们就是兄弟

为了区别标签的不同引入属性

 <tag 属性1="值1" 属性2="值2" ...... 属性n="值n"></tag>
 <tag></tag>

2.标签

1.1文本

font 字体

size 大小
color 颜色
face 字体族黑体楷体

<font size="8"color="#7fffd4"face="楷体">

span 文本

没有样式只在CSS中有作用

<span>小猪的名字叫芋圆</span>

p 段落

行间距
align 对齐方式 left center right

<p align="left">小雨点</p>
<p align="center">小雨点</p>
<p align="right">小雨点</p>

h1-h6 标题

行间距
align 对齐方式 left center right

<h1 ><b>芋圆小猪日志</b></h1>
<h2>...</h2>

hr 水平分割线

<hr color="purple"width="80%"align="left"size="4px">

序列行间距margin 行缩进padding

ul 无序

type disc 实心圆 circle 空心圆 square 实心方块
li 项

<ul type="square">
    <li>傻</li>
    <li>好看</li>
    <li>像猪</li>
</ul>

ol 有序

type 1(默认) a A I i
li 项

<ol type="1">
    <li>傻</li>
    <li>好看</li>
    <li>像猪</li>
</ol>

br 换行

1.2输入input

type 属性

text 默认文本输入框

用户名：<input type="text" value="yuyan"name="username"><br>

password 密码输入框

密  码：<input type="password"value="000526"name="password"><br>

radio 单选按钮

必须把需要互斥的单选按钮的name设置成相同内容
checked="checked"默认被选中

性  别：
      <input type="radio"value="1"name="s">女
      <input type="radio"value="2"name="s">男
      <input type="radio"value="3"name="s">不详

check box 复选框

爱  好：
      <input type="checkbox"value="cg"name="hobby">唱歌
      <input type="checkbox"value="tw"name="hobby">跳舞
      <input type="checkbox"value="by"name="hobby">表演

file 文件输入框

头  像:
      <input type="file"name="photo">

button 普通按钮

<input type="button"value="普通按钮">

submit 提交按钮

<input type="submit"value="提交按钮">

reset 重置按钮

<input type="reset"value="重置按钮">

select下拉菜单

option 菜单中的选项

出生年月:
    <select name="year">
    <option selected>1997</option>
    <option>1998</option>
    <option>1999</option>
    <option>2000</option>
    </select>

form表单

专门为服务器搜索数据的元素：我们只需要把input和select放在form中每个标签都写name属性，那么就可以提交数据了

1.3 table 表格

工整对齐
1. border=“1” 边框
2. cellspacing=“0” 单元格之间距离
3. cellpadding=“0” 单元格的填充距离
4. align对齐水平方向 left center right
5. bgcolor 背景颜色
6. background 背景图片
```
<table border="1"cellspacing="0"cellpadding="0"align="center"background="bj00.jpg">
```

tr 行

align对齐水平方向 left center right
valign对齐垂直方向 top middle bottom
bgcolor 背景颜色
background 背景图片

td 列

单元格单元放到行中管理
align对齐水平方向 left center right
valign对齐垂直方向 top middle bottom
bgcolor 背景颜色
background 背景图片

合并单元格：

</tr>
<tr align="center" height = "100">
    <td width="200px" align="center">姓名</td>
    <td width="200px"align="center">李瑾</td>
    <td width="200"align="center">性别</td>
    <td width="200"align="center">女</td>
    <td width="200"align="center">出生年月</td>
    <td width="200"align="center">20001102</td>
    <td width="800"align="center"rowspan="4"background="yuyan04.png"></td>
</tr>

CSS：style样式

内容的展现形式

cascade style sheet 级联样式表层叠表

1.引入方式

1.1内嵌式

直接内嵌到html元素中

<font style="font-size:100px;color: aquamarine">
    喻言
</font>

1.2内部式

把样式属性定义在style标签中该标签在head中

<head>
    <meta charset="UTF-8">
    <title>内嵌式测试</title>
    <style type="text/css">
        span{
            font-size:100px;color:aquamarine
        }
    </style>
</head>

<body>
<span>
    yuyan
</span>
</body>

1.3外部式

把样式定义在一个xxx.css的文件中企业中最常用的方式
在这里插入图片描述

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

在这里插入图片描述

hi{
    font-size:300px;
    color: aquamarine;
}

2、选择器：

2.1元素选择器

每个html都可以作为选择器存在
span font h1
当前页面中 所有的标签都使用该样式 优先级最低

在这里插入图片描述

2.2 id选择器

定义：#加合法表示符
使用：如果那个元素想使用就使用id属性,直接等于合法标识符;不需要写#

唯一的

在这里插入图片描述

<h1 id="h00">芋圆</h1>

#h00{
    font-size:50px;
    color:rosybrown;
}

2.3 class类选择器

定义：.加合法表示符
使用：如果那个元素想使用就使用class属性,直接等于合法标识符,不需要写**.**
应用：

一类可以不唯一通用
span font p 的样式一样

<h1 class="h01">芋圆</h1>
<span class="h01">yuyan</span>

.h01{
    font-size:50px;
    color:cornflowerblue;
}

2.4 组合选择器 (问题未解决)

可以同时定义2.1 2.2 2.3的选择器中间使用逗号分隔
所有选择器使用同一个样式属性

2.5后代选择器

根据html定义的选择器嵌套关系进行定义中间使用空格分隔

在这里插入图片描述

<div>
    <p>
        <font>
            div p font 嵌套中的芋圆
        </font>
    </p>
</div>

div p font{
    font-size:50px;
    color:orange;
}

2.6伪类选择器

选择器:伪类

在这里插入图片描述

<a id="a1"herf="https://i.csdn.net/#/uc/profile?spm=1001.2100.3001.5111">
    主页链接</a>

#a1{
    font-size:50px;
    color:blueviolet;
}
#a1:HOVER{
    font-size:70px;
    color:plum;
}

2.7 通用选择器

页面初始化（ 优先级最低）

在这里插入图片描述

 <h2>最后一个芋圆</h2>

*{
    font-size:50px;
    color:rosybrown;
}

优先级 id>class>元素选择器 如果是后代那么是所有选择器之和。

JavaScript：

数据交互交互的

讨厌社长.

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录