首页 > 其他分享 >HTML_CSS笔记

HTML_CSS笔记

时间：2024-11-09 16:42:32浏览次数：1  
标签：样式 标签 笔记 语法 HTML div 选择器 CSS 属性

软件准备

  1. 软件的安装
    1. 常用的编辑器 (3)
      1. Vscode H-builder sublime
    2. 汉化插件
      1. chinese
    3. 编码提示
      1. Html Css
    4. 浏览器运行插件
      1. open in browser/open in default browser
    5. 服务端运行插件
      1. live server
  2. 编辑器的设置
    1. 自动保存
      1. auto save
    2. 字体大小
      1. font-size
    3. 折行显示
      1. word-wrap on
  3. 浏览器
    1. 产看页面的常用浏览器包括?
      1. IE(edge) ,safari,firefox,Opera,chrome;
      2. edge浏览器是IE浏览器的更新
    2. 开发工程师推荐使用的
      1. chrome firefox safari
  4. 图像处理相关软件
    1. PxCook
      1. (https://www.fancynode.com.cn/)
    2. Ps
      1. 功能:专业的图像处理软件，UI，产品，前端开发；

基础知识

  1. 网站与网页的关系

    1. 多个网页组成了一个网站；

  2. 网站定义：

    1. 站点：文件夹的创建
    2. 文件夹：存储小的文件和文件夹
    3. 文件：图像 word excel txt

  3. 建立站点：

    • 文件夹包括，使用用途，功能
      • css img js html
      • 存储样式文件，图片文件，js功能型交互，骨架文件
      • 文件分类，网站看起来整洁，整齐；
    • 站点命名遵守______和________
      • 规则:定义（人人必守）
        • 命名 数字英文混合，英文下划线开头，不建议使用中文
        • 可使用字母，数字，下划线（_）,连接符（-）
        • 特殊符号不可 $@^&%
      • 规范:定义（可遵守，可不遵守）
        • 见名知意：不建议拼音
          • 页面命名（4）
            • 首页/注册页/登录/详情
            • index/login/submit/detail
        • 驼峰命名
          • 多个单词组成，其他单词首字母大写

  4. 设置谷歌浏览器为默认

    1. 步骤
      1. 搜索引擎
      2. 默认浏览器

  5. 网页格式文件

    1. 后缀两种

  6. 网站的组成部分

    1. HTML部分
      1. 基础骨架
    2. CSS部分
      1. 基础骨架修饰
    3. JS部分
      1. 行为交互层

  7. html与html5与h5

    1. html 超文本标记语言：每个字母的含义，Hyper(超级)，Text(文本)，Markup(标记)，Lauguage(语言)
    2. html5： html第五个版本；
    3. h5：h5是技术的总称，包含了js，html,css各种各样的高级函数（app)

标签语言

  1. 单标签又名

    1. 样式

      1. 独立的出现，只有开始没有结束

    2. 语法

      1. < hr >
  2. 双标签

    1. 样式：

      1. 成对出现，又开始有结束

    2. 语法：

      1. <标签名 属性="属性值"> </标签>
  3. 标签的总结：
    1. 出现:单标签独立出现，双标签结束必须带上/
    2. 标签的修饰符放在开始标签的位置除，并且与标签名字之间带上空格
    3. 属性与属性值之间的链接
    4. 属性值用引号引起来
    5. 属性与属性值之间空格隔开
    6. 所有标签放在尖角号内

标签类型一：文本修饰

  1. 加粗
    1. 语法 两种：b/strong
    2. 作用
    3. 开发选择 strong 语义化，更加明显；
  2. 倾斜
    1. 语法 三种：i/em/var
    2. 作用
    3. 开发选择 em, var不适用的原因，js中有一个关键词用来声明变量；
  3. 下划线
    1. 语法 一种：
  4. 删除线
    1. 语法一种：
  5. 角标
    1. 两种：sup /sub
  6. 文本修饰 font
    1. 属性：
      1. 颜色 color
      2. 字体 face
        1. 默认浏览器字体为：宋体
      3. 大小 1-7
  7. 空文本标签
    1. sapn
  8. 超链接
    1. 基本语法
    2. 功能
      1. 不同页面 超链接
        1. 绝对路径
          1. 文件夹
          2. 网址
        2. 相对路径
          1. 同级：./
          2. 同级文件夹下方的文件： ../
          3. 根目录： / or
          4. 灵活：../ ../
      2. 相同页面 锚点功能
        1. 应用场景
        2. 基本语法<a href href="#id选择器的名称"
        3. 点击区域：a
        4. 跳转区域：p
          1. 自动生成文本lorem*30自动生成书籍

标签类型二：区块划分

  1. 文本标题

    1. 特点：4 块级，独占一行，加粗，双标签
    2. 应用场景：

  2. 段落

    1. 语法：p

  3. 列表

    1. 有序 ol (older)

      1. 语法：

        <ol type='a'>
	<li></li>
</ol>

      2. 属性：

        1. type ="a/A /1/I /i"
        2. start ="5"

    2. 无序ul(unorder)

      1. 语法：

        <ul>
	<li></li>
</ul>

      2. 属性：

        1. type="disc/circle/square/none"

    3. 自定义列表

      1. 语法：

        <dl>
	<dt></dt>
	<dd></dd>
</dl>

      2. 使用场景：自定义问答列表，图文混排,通常dt搭配多个dd使用，但不排除多个dt的出现；

标签类型三：单标签

  1. hr

    1. 取消阴影标签 noshade="noshade"
    2. 颜色 color="red"
    3. 宽度 width="500px" 高size
    4. 水平对齐 align="left"
    5. 高度 size="500px" 不是css属性，是html标签属性

  2. br

    1. 单标签,只有开始没有结束

  3. img

    1. 基本语法：
    2. alt与title属性区别？
      1. alt图片破损的时候才会显示，不破损不显示，占页面的空间
      2. title鼠标放于图片上方才会显示
      3. 相同点都是提醒文本；不同点alt破损时才会提醒，title鼠标悬停才显示；altz占页面空间，；
      4. 推荐seo搜索引擎的优化；提高网站排名
    3. src="" 图片加载路径包括
      1. 绝对路径
        1. 直接插入计算机的c/d盘为起点的图片的路径；
      2. 相对路径
        1. 同级关系：直接使用名称；
        2. 上级关系：上一级../ 上两级../../ + 文件夹的名称 逐级向下；
        3. 根目录开始：/表示根目录；
    4. width="宽度属性"/height="高度属性"
      1. 实际开发的过程种不推荐使用，容易引起图片的失真变形，如果图片只设置其中一个属性的话，就会等比放大

基础代码创建

  1. !+tab英文 自动补全

  2. 手敲

    <!DOCTYPE html>
<!-- doc   document(文档)  type类型  doctype(声明文档类型)   html页面文件-->
<html lang="en">
<!-- html 超文本标记语言, 所有的标记所有的标签都需要放在html里面 lang="en" -->
<head>
    	<!-- head 头部:网页的头部 -->
   		<meta charset="UTF-8">
    	<!-- meta 定义字符编码格式的 编码格式被设置成了UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<!-- 视口 -->
    	<title>我的第一个页面</title>
    	<!-- title 标题:网页的标题 -->
</head>
<body>
    	<!-- body 主体:网页的主体 所有想要给用户看的东西都需要在body显示 -->
    	我是一个粉刷匠,粉刷本领强;
</body>
</html>

  3. 结构注释语句

    1. <!- ---注释内容---->
    2. ctrl+？

  4. 基础代码定义

  5. 头部范围head

表单

  1. 作用：收集用户的信息；

  2. 基本语法：

    <form></form>
action="提交地址" 开发时候需要将他提交到对应的文件或地址中，例如：asp,jsp文件；
method="提交方法" get/post
target="打开方式" _black/_self/_parent/_top

  3. 基本控件：

    <input type="?"> 
type="text/password/submit/reset/button"
普通文本/密码框/提交按钮/重置按钮/普通按钮

  4. ps

    input经常搭配 <label for="id" 使用>
id代表input中的id属性；
name属性表示传输路径中等号前的内容;
value代表input中需要传输的值;

    id与name不可混淆

CSS基本/引入

  1. 基本语法：
选择器{
	属性：属性值；
}

  1. 基本语法特点：

    • 属性和属性值需要使用冒号(:)链接;
      每一组属性和属性值结束后需要使用分号(;)分割
      建议最后一组属性添加上分号(

      标签：样式,标签,笔记,语法,HTML,div,选择器,CSS,属性
      From： https://www.cnblogs.com/saturday-blog/p/18536947

相关文章

  • atcoder DP做题笔记
    [ABC163E]ActiveInfants题意：给定长度为\(n(n\le2\times10^3)\)的序列\(a\)，重排使得\(a_x\times|x-p_x|\)之和最大。独立完成。从大到小地考虑\(a_i\)，贪心地使得\(|x-p_x|\)最大。那么\(p_x\)要么在最左，要么在最右。因此在左边和右边形成了一坨前/后缀，然后......
  • AMC2024 12A 题目笔记
    题目编号按照AoPS。√√√√√√√××√.×√√√√.√√√.....P6对啦！首先注意到答案应该是一个正的加两个负的。暴力枚举所有合法的三元组，算得\(10-6-1=\boxed{\mathbf{(B)}\3}\)。☆经验：枚举一个数\(n\)的分解\(x\timesy\timesz\)是可以接受的。A......
  • SpringMVC 学习笔记
    概述SpringMVC中的MVC即模型-视图-控制器，该框架围绕一个DispatcherServlet改计而成，DispatcherServlet会把请求分发给各个处理器，并支持可配置的处理器映射和视图渲染等功能SpringMVC的工作流程如下所示：客户端发起HTTP请求：客户端将请求提交到DispatcherServlet寻找......
  • HTML基础练习
    注意：全卷满分140+45分，时间40分钟。全开卷，并允许联网查询。凡是标注“不定项”的，每个选项均分总分，每错选或漏选一个均仅扣除该项得分。例如8分4选项题，答案为AD，选ABD得6分，A得6分，AB得4分。所有题目均为人工阅卷，不需要特别遵守格式规范，均按照答案酌情给分。答题纸代码：0IDS......
  • （Lin的实施运维笔记06）解决Tomcat服务器在控制台窗口中的乱码问题
    产生乱码的根本原因就是编码和解码不一致，比较常见的编码格式有Unicode、ASCll码、GBK、UTF-8等，Tomcat控制台的乱码问题只需要把日志配置文件中的UTF-8格式改成GBK格式就行解决方法：1、找到Tomcat的安装目录下conf文件夹2、打开conf文件夹中的logging.properties文件，并搜索找......
  • 【吴恩达机器学习笔记】9.1-Logistic 回归的梯度下降
    使用同步更新来执行更新的办法罗杰斯特回归的梯度下降这张图片展示了逻辑回归中的梯度下降算法。逻辑回归是一种广泛使用的分类算法，它使用一个逻辑函数来预测事件发生的概率。梯度下降是一种优化算法，用于最小化损失函数，从而找到最佳的模型参数。图片中的内容可......
  • 使用HTML、CSS和JavaScript创建动态雪人和雪花效果
    ✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。......
  • 【html网页设计】 ----我的家乡宁夏学生网页设计作品 宁夏旅游景点网页
    一、......
  • 基于HTML+CSS+JavaScript仿淘宝购物商城设计毕业论文源码
    常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题......
  • 大三学生HTML个人网页作业作品——电影动漫言叶之庭(4页)带音乐
    HTML实例网页代码,本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。文章目录网页介绍网页介绍1网页简介：此作品为学生......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99