html和css基础整理_html css 设置 lable 只显示字符串首字母-CSDN博客

本文链接：https://blog.csdn.net/weixin_68658847/article/details/126673613

文章目录

html，css基础

html，css基础

文档基础结构

DOCTYPE：

document type 声明文档类型 告诉浏览器以何种规范解析当前文档
html：以H5的标准解析文档

结构标签

<html></html>作为页面中一个最大的标签，包裹住其他小标签，称其为根标签

<head></head>文档的头部，在这其中必须包含tilte标签

<title></title>文档的标题，给页面设置标题

<body></body>文档发主体，页面中的内容基本都放在改标签里。

html：

根标签，网页中最大的标签，有且仅有一个。所有的标签必须写在HTML内
    lang="en" 
        language：定义当前文档语言类型
        en：english 英语

head：

head：头标签，设置字符集，说明性的标签，页面标题，外部文件，内部样式表等...
            charset:一般写在head标签内的第一行，保证页面标题不会出现乱码。
                UTF-8:一种通用的编码方式，解决中文乱码。

body：

body:设置网页的主体内容。

基础标签

标题标签：h1最大，h6最小。默认样式：上下外边距，字体大小，字体样式。
emeat语法：h${标题$}*6 
        $:从1开始生成 *n 生成到n.
        {}:定义标签中的文本。
        
p：段落文本标签，块元素，所有的文本标签都是行内/行元素，p除外。默认的外边距，上下16px -->
    <p>段落标签</p>
    
div:标准的块标签，默认宽度100%，高度由内容撑开。(没有内容高度为“0”)

 行内元素：宽高均由内容决定。
        span:普通文本标签。

属性

contenteditable="true"//定义可编辑文本
<bdo dir="rtl">大卫佛海v哦i文化</bdo>//显示位置，rtl即right to left从右往左
draggable="true" //定义可拖拽文本
target="_blank"  //打开新窗口
title="首先是教学设计"   //悬浮提示

文本标签：

<span>普通文本</span>
    <strong>语义化加粗文本，强调文本的重要性。</strong>
    <b>加粗文本，不具有强调意义。</b>
    <em>具有强调意义，表示文本的重要性。</em>
    <i>斜体文本，不具有强调意义。</i>
    <del>具有强调删除意义，表示被弃用的内容</del>
    <s>删除线文本</s>
    <ins>具有强调意义，表示新增的内容</ins>
    <u>插入文本</u>
    <small>小号字体</small>
    <big>大号字体</big>
    <!-- 计算机输出文本 -->
    <code>电脑自动输出</code>
    <kbd>键盘码</kbd>
    <samp>计算机代码样式</samp>
    <var>变量</var>
    <pre>
        预格式文本。
        尊敬的XXX:

            pre标签可以定义有格式的文本，文本中的所有空格以及换行都可以显示。
            其他标签之内的文本与换行只能编译为一个英文空格符，标签之间的换行也会被编译为一个英文空格符。
                真厉害。

                                                亚亚子❤️
    </pre>
    <sup>上标</sup>
    <sub>下标</sub>

语义化结构标签

语义化结构标签：
            根据内容的结构"内容语义化"，选择合适的标签"标签的语义化"。
            作用:便于开发者阅读，让浏览器爬虫和机器更好的解析。
            优点：
                1. 在没有css样式的情况下，页面也能呈现出很好的内容结构"代码结构".
                2. 代码结构清晰，方便阅读和团队合作开发。
                3. 方便搜索引擎识别页面结构，有利于SEO(搜索引擎优化)。
                4. 方便其他设备解析(屏幕阅读器，盲人阅读器，移动设备)，以语义化的方式渲染页面。
 
    <nav>标记导航，仅对页面中重要的链接群使用</nav>
    <header>页眉，通常包含LOGO，主导航，全站链接以及搜索框...</header>
    <main>页面主要内容，一个页面只能使用一次。</main>
    <aside>侧边栏，定义所有内容之外的部分或之外的一组链接等。</aside>
    <section>区域，一段，定义页面中的章节或块，代替div</section>
    <footer>页脚，只有当父元素是body时才是整个页面的页脚</footer>

超链接和路径

 a:超链接 
         href：url,网页链接。
         target:设置新超链接的打开方式。
            _self:默认值，默认在当前标签页打开超链接。
            _blank:新建标签页打开超链接。
         title:光标悬停时的提示文本。
      相对路径:
            ./:查找同级文件
            ../:查找上级文件
            ../../:查找上两级文件
      绝对路径:C:/Users/mac/Desktop/开课第一天/02-标签.html

图片

img:图像、图片
            src:图片资源路径，支持网络图片或本地图片。
            alt:图片加载失败时的提示文本

列表标签

列表标签
            ul:unorder list 无序列表
                li：list 列表选项。
            ol:order list 有序列表
     		 dl：define list 自定义列表
                dt：define title 自定义标题
                dd：define details 自定义详情

表单标签

表单标签 
            form 创建表单。
                action：定义表单数据发往何处。
                method：定义发送数据的方式。
                    get/post。
                    
 单行文本输入框 
                    type:定义表单的类型
                        text：文本输入框
                        password:密码输入框
                        number:数字输入框
                        tel:手机号码输入框
                        email:邮箱输入框
                        color:颜色选择器
                        file:文件选择器

type属性

<input type="text">
        <input type="password" name="" id="">
        <input type="number" name="" id="">
        <input type="tel" name="" id="">
        <input type="email">
        <input type="color">
        <input type="file">
        <!-- 年月日选择器 -->
        <input type="date">
        <!-- 本地年月日时选择器 -->
        <input type="datetime-local">
        <!-- 周选择器 -->
        <input type="week">
        <!-- 月选择器 -->
        <input type="month">
        <p>
            <!-- 单选，必须定义相同的name，才可以实现单选。 -->
            男 <input type="radio" name="sex">
            女 <input type="radio" name="sex">
        </p>
        <p>
            <!-- 多选 -->
            <input type="checkbox">
        </p>
        <!-- 进度条 -->
        <input type="range">
        <!-- 图片按钮 -->
        <input type="image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
        <button>普通按钮</button>
        <!-- 提交按钮，value:定义按钮的值。 -->
        <input type="submit" value="登录">
        <!-- 按钮 -->
        <input type="button">
        <!-- 重置按钮 -->
        <input type="reset" value="清空">
        <!-- 隐藏的输入框 -->
        <input type="hidden">

列表选择器：

select：列表选择器
                  size:属性用于定义多选时，所显示选项的个数，默认值：4.
                  multiple：允许多选。
                    optgroup：选项组
                      label:定义选项组标题。
                        option：选项
                          value：选项的值.
                    disabled:属性用于设置禁用的标签。
                    selected:属性用于定义默认选中项。
                    HTML中定义，属性与值相同时，可以省略属性值。
                    name:属性用于定义表单控件的名称。

多行文本输入框：

多行文本输入框 
                name:定义表单控件的名称。
                cols:一行所显示英文字符的个数，显示的列数。
                rows:显示的行数(取值为英文字符的行数)
                
                
   fieldset:对表单内的元素分组。
                legend:对不同的分组进行文字说明。
          
         <fieldset>
            <legend>标题</legend>


 datalist:此标签与文本输入框结合，相当于一个下拉框，input既可以手动输入，又可以下拉选择。
                将datalist的id属性值赋值给input的list属性，即可实现。
         
         <datalist id="record">
            <option value="HTML5.0"></option>
            <option value="CSS3.0"></option>
            <option value="Javascript"></option>
         </datalist>

CSS样式

1. 行内样式表。
        2. 内嵌样式表。
        3. 外联样式表。
        引用方式的优先级。
            正常情况下：行内样式 > 内嵌样式 > 外联样式
            非正常情况下：内嵌样式和外联样式会有浏览器的执行顺序问题(最后引用的会覆盖之前的样式。)

CSS选择器

>父子选择器  父元素>子元素  
空格代表后代选择器
~ 代表兄弟选择器
+ 相邻兄弟选择器

浏览器是怎么解析css选择器的：
		-css选择器的解析是从右往左解析的。如果从左至右匹配，发现不符合规则需要回溯，会损失很多性能。
		-若从左至右匹配，先要找到所有的左边第一个节点，对应的每个节点上寻找其父元素节点直到找到根元素或满足条件的匹配元素，则结束这个分支遍历。

伪类选择器

  -根据序号查找元素，称之为 序号选择器。
  -根据类型查找元素

序号选择器

:nth-child(n)根据：前指定的标签选择第n个为此标签的元素。如果是even(2n+1)就是偶数,odd(2n+1)就是奇数(正数)
:nth-last-child(n)倒数第n个子元素
:last-child(n)选择最后一个：前指定的子元素。
:first-child(n)选择第一个：前指定的子元素。
:only-child 选择唯一的子元素。

--------以下根据标签类型选择
:first-of-type根据标签类型选择第一个元素。
:last-of-type根据标签类型选择最后一个元素。
:nth-of-type(n)根据指定标签类型选择第n个标签(正数)
:nth-last-of-type(n)根据指定标签类型选择倒数第n个标签(倒数)

扩展

1、:first-child：表示选择第一个子元素，如 .box1 p:first-child 表示选择box盒子中的第一个p

 2、：nth-child():表示选择任意序号的子元素，如 .box2 p:nth-child(3)表示选择box2盒子中的第三个p。另外nth-child还可以写成an+b的形式，如 .box2 p:nth-child(3n+2)表示从第二个p开始，每三个p选择一个 ps：2n+1等价于odd及奇数，2n等价于even及偶数

 3、:nth-of-type：表示选择同种标签指定序号的子元素，

 

如 .box3  p:nth-of-type(3)表示box中p类型的第三个p

4、:nth-last-child()：表示倒数选择

5、:nth-last-of-type()：表示倒数选择

交集选择器

每个选择器都有自己的权重值，简称权值，权值越大，优先执行。
id选择器>class选择器/伪类/属性>元素选择器
100      10          1

选择器优先原则：!important(10000) > 行间样式(1000) > ID 选择器(100) >class 选择器｜伪类选择器｜属性选择器(10) >元素选择器｜伪元素选择器(1) > 通配符选择器｜子选择器选择器｜相邻兄弟选择器(0)

权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。

选择器权值可以相加
!important(无条件优先执行，权重10000)

交集选择器：选择器连接使用，多个选择器选择一个标签。

并集选择器

, 用逗号分隔多个选择器，同时选择多个标签

*:not(body,html)意思指选择除了html，body标签之外的其他标签

伪元素选择器

::selection   定义光标选中时的样式
::first-letter  为某个元素中的第一个字符设置样式，有符号会连带符号，可以加个空格解决
::first-line    定义首行文本的样式
::placeholder   定义input的placeholder属性的样式
::before {content:""  //content必须设置，如果不需要插入文本可以为""} 在某个元素之前插入一些内容
::af