前端基础知识

最新推荐文章于 2024-07-16 17:18:30 发布

「已注销」

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量64

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/nfsp412/article/details/125059059

版权

前端基础知识

结构HTML-表现CSS-行为JavaScript

一.HTML超文本标记语言

1.概述

HTML: 超文本标记语言
超文本: 不仅仅是文本内容,还包括图像,音频,视频,超链接等
标签: 学习HTML,就是在学习各种标签,这些标签有单标签也有成对标签
骨架: 超文本的内容 + 标签 = 网页的骨架

2.IDE

VSCode: 免费的HTML代码书写软件
插件: 中文插件;open in browser;
快捷键-快速格式化代码: shift + alt + f
快捷键-快速生成代码骨架: ! + tab
快捷键-注释: ctrl + /

3.标题标签

标题标签: <h1>一级标题</h1>

标题标签一共分为六级
独占一行;文字有特殊的样式

4.段落标签

段落标签: <p>段落内容</p>

段落标签也是独占一行的,但是段落的内容不一定只占一行,会根据窗口大小进行换行

5.换行标签

换行标签: 文字1<br>文字2

是一个单标签
文字内容遇到换行标签就会强制换行
在标题标签和段落标签里面仍然能够使用

6.图像标签

图像标签: <img scr="图像路径" alt="">

不会独占一行,这意味着不会强制换行
是一个单标签
scr=“图像路径” ,是标签的属性 ,采取属性 = 属性值的方式
scr属性是必须属性

7.div标签和span标签

div标签: <div>大盒子</div>
span标签: <span>小盒子</span>

都是用来布局的
div独占一行,并且一行只有一个盒子
span一行可以有多个

8.链接标签

超链接标签: <a href="">提示信息</a>

超链接标签不会独占一行,和图像标签一样,不会强制换行
href属性是必须属性
href属性值:
- 绝对 URL - 指向另一个站点（比如 href=“http://www.example.com/index.htm”）
- 相对 URL - 指向站点内的某个文件（href=“index.htm”）
- 锚点:指向本页面中某个位置,结合id使用,可以实现页面底部快速返回页面顶部

9.表格标签

表格标签:
<table>
    	<tr>
        	<th></th>
            ...
        </tr>
    	<tr>
        	<td></td>
            ...
        </tr>
</table>

用处:展示数据
table是一个双标签,里面包含多少行tr,每一行中包含多少单元格td
th是一个特殊的td,是表头单元格

10.列表标签

无序列表:
<ul>
    <li></li>
    ...
</ul>
有序列表:
<ol>
    <li></li>
    ...
</ol>

用处:布局页面
列表里面只能放li标签,但是li标签里面可以放任何内容

11.表单标签

表单域:
<form>
    表单控件:
    <input type="text">
    <select>
        <option></option>
        ...
    </select>
    <textarea></textarea>
    提示信息:
</form>

用处:收集用户信息
表单 = 表单域 + 表单控件(表单元素) + 提示信息(文本内容,不是标签)
表单控件
- input输入标签
  - 单标签
  - type属性为必须属性
    - 属性值可取:button, checkbox, file, text, password, radio, reset, submit
  - name,value为属性,其属性值为自定义的内容
    - name代表该input标签是干嘛用的,比如选择性别的单选框,name就可以叫性别
    - value:如果name代表性别,那么value就可以设置为男,女两个值
  - 不会独占一行
- select下拉标签
  - 双标签
  - 里面包含至少一对option标签
    - option是双标签
    - 添加属性 = 属性值: selected=“selected” 可以默认选中哪个选项
  - 不会独占一行
- textarea文本域标签
  - 双标签
  - 不会独占一行

12.label标签

用处:增加用户体验的
结合input标签使用
双标签
label 的 for属性和其他标签的 id 属性结合使用

13.placeholder属性

用处:增加用户体验
可以输入一些默认提示的信息,并且比value属性更好用
原因在于点击之后不需要把提示信息全部删除再书写内容

二.CSS层叠样式表

1.概述

CSS: 层叠样式表
血肉: 针对前期的网页骨架,进行各种优化,相当于构成了血肉

2.引入方式

行内式
1. 在标签中直接书写style属性=样式进行样式的设置
内嵌式
1. 在当前页面的head标签内部
2. 添加style标签,然后在里面书写css的代码
外链式
1. 真正实现了样式结构的分离
2. 把css代码写到css文件中
3. 在head标签中使用link进行调用

3.选择器-找标签用的

基础选择器
1. 标签选择器:
  1. 标签名 { 属性 : 属性值 ; … }
  2. 一次性会选择所有的该标签
2. 类选择器
  1. .类名 { 属性 : 属性值 ; … }
  2. 样式点定义,结构类调用
  3. 使用最多,可以选出任意的标签修改
  4. 类名:数字字母下划线,中划线,但是数字中划线不能开头
  5. 一个标签可以书写多个类名,中间用空格隔开就行;同样的不同的标签可以调用多个类名
3. id选择器
  1. #id名 { 属性 : 属性值 ; … }
  2. 样式#定义,结构id名调用
  3. 主要用来配合js使用,初衷并不是用来修改样式的
  4. 一个标签只能有一个id属性值,一个id选择器只能选中一个标签,虽然能够修改,但是不符合编程规范
复合选择器
1. 后代选择器
  1. 选择器1的所有的后代选择器2都能被选择
  2. 选择器1 选择器2 {属性:属性值;…}
  3. 选择器1,2可以是任何一种基础选择器
2. 并集选择器
  1. 同时选择多个选择器进行合并设置样式,节约代码
  2. 选择器1, 选择器2 {属性:属性值;}
  3. 选择器1,2可以是任何一种基础选择器
3. hover伪类选择器
  1. 选择鼠标悬停在元素上的状态,设置样式
  2. 任何标签都可以添加伪类,因为任何一个标签都可以鼠标悬停
  3. 标签名:hover {属性:属性值;}