• HTML和CSS

     HTML

    一、网页

    网页：网站中的一页，网页文件已htm和html结尾，俗称html文件。

    网页中基本元素：图片，连接，文字，声音，视频。

    HTML：超文本标记语言，他是用来描述网页的一种语言

    二、浏览器

    浏览器内核(渲染引擎)：负责读取网页内容，整理讯息，技术网页的显示方式并显示页面

    三、http与https的区别

    HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），默认端口号80。

    HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，默认端口号443。

    HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

    四、HTML基础

    1、基础语句分析

        

        

        

        Document

        我就是一个笑话

    ①文档类型声明：

    表示当前页面采取的是HTML5版本来显示网页

    位于html标签之上，他不是一个HTML标签。

    ②语言定义：lang属性

    lang="en"表示英语  lang="zh-CN"表示中文

    ③编码定义：  //麦特

    2、基本标签使用

    ①

    一条线

    ②标题标签

     -->  
        每个标题独占一行，h1到6字体依次减小

    ③段落标签

     段落之间有空行

    ④换行标签
           换行之间没有空行

    ⑤文本格式化标签：对字体进行设计

            加粗： 或者

            倾斜： 或者

            删除线： 或者

           下划线： 或者

    ⑥

    和

            div写在该标签的内容在浏览器中独占一行

            span 多个span标签在浏览器中会有间隔，可以在一行

    ⑦图像标签”图片的URL” />

            src是标签必须属性，它用于指定图像文件路径和文件名。

            相对路径的3种情况：

            当图片与html文件在同一个文件夹可以使用相对路径(图片名)，

             图片位于html文件下一级使用 /

            图片位于html文件上一级使用 ../

            其他情况使用绝对路径或者使用网络图片，将链接写入

            属性：

            alt    替换文本，当图片路径错误，则显示文本  

            title   提示文本，当鼠标放到图像上，显示文字

            width  设置图像宽度，单位是像素px  //为吃

            height  设置图像高度，单位是像素px

            border  设置图像边框粗细，单位是像素  //包的

    ⑧在HTML中，多个空格会被当成一个空格来显示。

    3、超链接标签 “ url”>

    文本，图像，表格，音频，视频都可以添加超链接

    属性：

    href：用于指定链接目标的url地址  //喝夫

    target：用于指定打开方式，默认_self原窗口打开，_blank新 窗口打开

    超链接分类：

    ①外部链接:百度

    ②内部链接：传递文件路径

    ③空连接：当没有确定链接时        百度

    ④下载链接：当地址为一个文件或者压缩包，会下载这个文件

    ⑤锚点链接：快速定位到当前页面指定位置

    第一种：跳转语句   刘德华

    将目标id属性设置为href属性名字         

    刘德华简介

    第二种：跳转语句   刘德华

    将目标name属性设置为href属性名字         刘德华简介

    4、自动刷新页面

    五、特殊字符

    六、表格标签

    1、表格的基本语法

    1. <table>
    2.     <tr>
    3.         <td>td>
    4.     tr>
    5. table>

      ①table用于定义表格的标签

      ②tr标签用于定义表格中的行，必须嵌套在table标签中

      ③td用于定义表格中的单元格，必须嵌套在tr标签中

    2、表头单元格-->加粗居中

    3、表格属性-->写在table标签中

    属性名属性值作用
    align left，center，right表格相对周围元素对齐方式  //e来n
    border边框宽度(像素)是否拥有边框，默认为0
    cellpadding像素值 字体到边框的距离，默认1   //晒偶拍顶
    cellspacing像素值单元格之间的距离，默认2    //死被死应
    width像素值  表格宽度   //为子
    height像素值 表格高度    //海特
    bgcolor 颜色    背景颜色  

     4、表格的结构标签 

    1. <table>
    2.     <thead>
    3.         <th>
    4.             <td>
    5.             td>
    6.         th>
    7.     thead>
    8.     <tbody>
    9.         <tr>
    10.             <td>
    11.             td>
    12.         tr>
    13.     tbody>
    14. table>
    15.  
    16.  
    17. ①<thead>thead>:用于定义表格头部,thead内部必须既有tr标签
    18.  
    19. ②tbody：用于定义表格的主体。

     5、td的属性

    跨行：在需要保留的单元格，写入属性rowspan=”2”，删除其他行

    跨列：在需要保留的单元格，写入属性colspan=”2”，删除其他行   

    合并单元格步骤：

            ①创建单元格

            ②找到目标单元格写入语句

            ③删除多余的单元格

     七、列表

    1、无序列表

    2. <ul>
    3.     <li>列表项1li>
    4.     <li>列表项2li>
    5.     <li>列表项3li>
    6. ul>
    7.  
    8. ·列表项1
    9. ·列表项1
    10. ·列表项1

    2、有序列表

    1. <ol>
    2.     <li>列表项1li>
    3.     <li>列表项2li>
    4.     <li>列表项nli>
    5. ol>
    6.  
    7. 1、列表项1
    8. 2、列表项2
    9. 3、列表项n

    3、自定义列表

    2. <dl>
    3.     <dt>名词dt>
    4.     <dd>解释1dd>
    5.     <dd>解释2dd>
    6. dl>
    7.  
    8. 名词
    9. 解释1
    10. 解释2

    4、列表横行显示

    1. <ul>
    2.     <li>列表项1li>
    3.     <li>列表项2li>
    4.     <li>列表项3li>
    5. ul>
    6.  
    7. <style>
    8.     ul li {
    9.         list-style: none;
    10.         float: left;
    11.     }
    12. style>
    13.  
    14. 列表项1 列表项2 列表项3

     八、表单

    1、表单组成：

    表单里面嵌套表格，表格里面放入表单控件

    2、作用：

    会将表单中信息提交给服务器

    语法：

      

            各种表单元素控件

    3、表单属性

    属性    属性值       作用
    action  url地址将收集的信息传到指定的url地址 //啊可新
    method get/restfull/post用于设置表单的提交方式，默认get    //买热特

     4、表单控件

    ① 输入表单元素

    ② 下拉表单元素

    ③文本域元素  输出为文本框 //哎瑞额

    ④相当于，

                                             前一个可以修改按钮文字
     

    input的 type属性的属性值及其作用
    radio单选按钮   //瑞低偶
    checkbox复选框   //柴可 box
    button按钮    / /把ten
    submit  提交按钮     
    text   输入文本框，默认20个字符
    password  输入密码
    number 数字
    month   年月（日历）
    date 年月日（日历）
    email 邮箱标签
    file上传文件
    reset  重置   //瑞晒特

       
       

    其他属性
    属性 属性值 作用
    name  自定义 表单控件名字
    value   自定义 表单控件提交时的值
    checked  checked 单(复)选框默认选中 //菜可的
    maxlength正整数规定字段中字符的最大长度
    placeholder自定义表单控件提示文字 //普累死吼的
    disabled disabled表示该input元素被禁用

    注意事项：

    ①name和value是每个表单元素都有的属性值，给后台传值使用

    ②name属性对应的值，要求单选按钮和复选框要有相同的值

    ②select下拉表单元素

    4、添加音频和视频

    1. //添加音频
    2.  
    3. <audio controls="controls">  // 奥低u  肯促死
    4.  
    5.   <source src="jay.mp3">source>  //少死
    6.  
    7. audio>
    1. //添加视频
    2.  
    3. <video controls="controls">  //v低偶 
    4.  
    5.     <source src="yibo.mp4">source> 
    6.  
    7. video>

    CSS

    一、使用位置

    1、内联样式

    <h1 style="text-align: center;">这是标题h1>

    2、内部样式  

    1. <head>
    2.     <style>
    3.         /*h1叫做选择器，该css语句是文字居中*/
    4.         h1{
    5.             text-align: center;
    6.  
    7.         }
    8.     style>
    9. head>

    3、外部样式

    1. 在head标签内建新标签<link href="路径" rel="stylesheet" />
    2.  
    3.                     //林克                //固定值

    二、选择器

    • 1、简单选择器（标签名称、id、class来选取元素）
    • 2、组合器选择器（根据它们之间的特定关系来选取元素）
    • 3、属性选择器（根据属性或属性值来选取元素）

    1、简单选择器

    标签选择  调用.p

    class选择器：

     b会覆盖a的效果 调用 .a

    id选择器：

      调用 #a

    每个id只能有一个值，多个class可以的值可以相同

    2、组合器选择器

    将多个简单选择器逗号隔开

    1. <style>
    2.  
    3.     .cc,.cc1,#pas,#pas1,span{
    4.  
    5.     color: #4169E1;
    6.  
    7.     }    
    8.  
    9. style>

    3、属性选择器：通过标签的属性选中元素

    ①a[href="#"]{  /*a为标签*/

            color: #00aa00;

    }

    //挑选a标签属性为href，值为#的部分

    ②a[href]{

            color: #00aa00;

    }

    挑选a标签属性为href的部分

    ③[href]

    三、盒子模型

    作用：一个元素看成一个盒子

    margin（外边距）

    例子：style=margin: 20px;  //码近

    margin-left  单独左边距   

    margin-right 单独由边距

    margin-top  单独上边距  //套坡

    margin-bottom  单独下边距     //包特木

    以下同理

    border（边框样式）

    1. #div2{   //包的
    2.  
    3.     border:10px solid yellow;/*实线*/  //烧类的
    4.  
    5.     border:10px dashed yellow;/*点状*/   //带斯特
    6.  
    7.     border:10px dotted yellow;/*虚线*/  //到忒的
    8.  
    9. }

    padding（内边距）

    1. <td style="padding: 20px;">用户名:td>
    2.  
    3. //拍顶  数据和盒子内边框的距离

  • 相关阅读:
    不使用实体类的情况下接收SQL查询结果、@Autowired注入为null解决
    51单片机用红外遥控变频空调的程序，带时钟走时DS1302，温度DS18B20带CRC，湿度HTU31D的I2C带CRC，电路图和二千行源代码全公开
    浅显易懂正则化-猛男技术控
    携职教育：中级经济师备考超强攻略，亲测有效，拿走不谢
    禁止linux shell 终端显示完整工作路径，如何让linux bash终端不显示当前工作路径
    Elasticsearch 8.X 防止 Mapping “爆炸”的三种方案
    理工ubuntu20.04电脑配置记录
    sylar高性能服务器-配置(P9)代码解析+调试分析
    Java 设计模式——访问者模式
    注意力&Transformer
  • 原文地址：https://blog.csdn.net/asddasddeedd/article/details/126216424