Web阶段Day01

最新推荐文章于 2024-09-15 20:59:02 发布

Hi洛一

最新推荐文章于 2024-09-15 20:59:02 发布

阅读量122

点赞数

分类专栏：个人博客前端文章标签：云计算与大数据 HTML CSS

本文链接：https://blog.csdn.net/qq_40233706/article/details/99993449

版权

个人博客同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

今日收获：

HTML
   概念
       互联网资源
           静态资源 html,css,js
           动态资源 Servlet,jsp,php

       架构
           C/S
               客户端/服务器端桌面版的QQ
           B/S
               浏览器/服务器端 web版的QQ

       HTML
           超文本标记语言

           作用
               描述一个页面

           操作思想
               网页中有很多数据,不同是数据需要不同的显示效果
               可以使用标签把要操作的数据包起来(封装起来)
               通过修改标签是属性值,实现标签内数据样式的改变

               一个标签就相当于一个容器,想要修改容器内数据的样式
               只要改变容器的属性值,就可以实现容器内数据样式的改变

           特点
               语法非常的宽松
               标签是不区分大小写,建议小写
               标签是预定义好,每个标签都有特殊的含义

   语法
       标签
           由尖括号包裹起来的关键字组成 <p>

       元素(标签体)
           开始标签和结束标签中间的所有内容都叫做元素
           元素可以是一段普通的文本,也可以是其他标签

       属性
           为了给元素提供更多的信息,已名称和值的形式出现

   标签
       文件标签(结构标签)
           <html>
               <head>文件标题</head>
               <body>文件正文</body>
           </html>

文本标签
           字体标签 <font> 1-7
           标签标签 <h1> to <h6>
           段落标签 <p>
           其他标签
               <br />:换行
               <hr />:水平线
               <b> 加粗
               <i> 斜体
               <center> 文本居中

       图片标签(重要)
           标签名 img
               重要的属性
                   src       设置图片的地址
                           如果图片和当前页面在同一个目录下
                               直接使用图片名称来进行访问
                           如果图片在当前页面下一级目录
                               通过目录名称/图片名称来访问
                           如果图片在当前页面上一级目录
                               通过 ../图片名称来访问
               其他属性
                   width 设置宽度
                   height 设置高度
                   alt    在图片无法访问的时候替代图片

       列表标签(了解)
           无序列表
               ul
                   type 规定在列表中使用的标记类型。

               li 列表项

           有序列表
               ol
                   start 规定有序列表的起始值。
                   type 规定在列表中使用的标记类型。

               li 列表项


       链接标签(重要)
           a标签
               重要的属性
                   href   定义要跳转的地址
                           内部地址
                               如果要访问的页面和当前页面在同一个目录下,
                                   直接通过页面名称来访问
                               如果要访问的页面在当前页面的下一个目录下,
                                   直接通过目录名称/页面名称来访问
                           外部地址
                               <a href="http://www.baidu.com">登录</a>//一定要加上协议
       行级和块级标签
           行级标签:如果上一行有空间,元素就在上一行显示,如果没有空间,才另起一行显示(font标签 a标签)
               span:纯粹的行级标签,默认不可以换行

           块级镖旗:不管上一行有没有空间,直接另起一行显示(h标签 p标签)
               div:纯粹的块级标签,默认可以换行

       表格标签
           相关标签
               table 定义一个表格
                   tr   定义表格中的行
                       td   定义行中的单元格
                       th 定义行中的表头
           相关属性
               width 定义宽度
               height 定义高度
               border 定义边框
               cellPadding 定义内容和单元格之间的距离
               cellSpacing 定义单元格直接的距离
               colspan 表格横跨行(都在td里面)
               rolspan 表格横跨列(都在td里面)

       表单标签(重要)
           form 表单标签定义表单提交的范围
               重要的属性
                   action 设置表单要提交的地址
                           默认提交到当前页面

                   method 设置表单的提交方式
                       get   默认的提交方式,数据都是拼接在地址栏后面
                       post 数据隐藏在请求体中

           input 输入项标签
               重要的属性
                   type   text        文本框
                           password   密码框
                           radio        单选框
                           checkbox   复选框
                           file       文件选择框
                           hidden       隐藏域
                           submit       提交按钮
                           reset       重置按钮//恢复到页面刚打开时的效果
                           image       图片提交按钮
                           button       普通按钮,配合js来使用

                   checked
                           checked 对于单选和复选框,可以设置元素的默认选中

           select 选择项标签//把固定的内容提前设置好,用户无需输入,直接选择
               option 选择框的选择项标签(select的子标签)

               重要属性
                   selected   默认选中

           textarea 文本域标签
               重要属性
                   cols   设置列数
                   rows   设置行数

           通用的属性
               name:表单中的数据想要被提交,必须要有name属性
                   对于单选和复选框,可以使用name进行分组

               value:对应单选和复选框,可以指定value的值,用于区分用户选择了那一个选项(默认都是on)
                   可以设置submit,reset,button按钮上的文字
                   可以设置文本框,密码框等元素上的默认值
                   可以设置下拉列表框选择项option标签的value的值,设置之后,提交到服务器上用的就是value的值,否则是option标签体里面的值

css
   概念
       层叠样式表

   作用
       页面美化和布局控制

   用法
       属性和属性值
           css通过属性和属性值来设置html的样式,属性和属性值使用冒号进行分割,多个属性之间通过分号进行分割
       选择器
           元素选择器,ID选择器,类选择器

   css和html的结合方式
       内联样式(行内样式):简单,耦合性强,不利于代码和样式的分离
           <font style="font-size: 1000px;color: green">你若幸福,便是终点</font>

       内部样式:复用性比较低,只能在当前页面使用
           <style>
               font{
                   font-size: 1000px;color: green;
               }
           </style>

       外部样式:复用性比较高,可以用在多个页面,统一网站的风格
           1,创建一个font.css文件
               font{
                   font-size: 1000px;color: green;
               }
           2,引入css文件
               <link rel="stylesheet" href="font.css">


   选择器
       基本选择器
           id选择器   #id的值
           元素选择器标签名
           类选择器   .class属性的值

       扩展选择器
           分组选择器(并集选择器)
               选择器a,选择器b
           后代选择器
               选择器a 选择器b
           子元素选择器
               选择器a>选择器b
           属性选择器
               元素名称[属性名=属性值]

   常见的属性
       字体属性
           font-size 字体大小
           color 字体颜色
           text-align 对齐方式

       边框属性
           border:取值依次是宽度样式颜色

       尺寸属性
           width 宽度
           height 高度

       背景属性
           background-color 背景颜色
           background-image 背景图片

       盒子模型(用于像素级的调整)
           margin 外边距
           padding 内边距
               默认情况下,内边距的改变会影响整个盒子的大小,通过设置box-sizing固定他的大小