HTML用法

阿波罗呀

于 2022-09-20 22:27:30 发布

阅读量513

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_46348847/article/details/107933151

版权

定位

定位：手动控制元素在包含块中的精准位置

涉及到的CSS属性：position

position属性

默认值：static，静态定位（不定位）

relative：相对定位

absolute：绝对定位

fixed：固定定位

一个元素只要position的取值不是static，则认为该元素是一个定位元素。

定位元素的特点：定位元素会脱离文档流（相对定位除外）

脱离文档流的元素的特点：

文档流中元素摆放位置时会忽略脱离了文档流的元素
文档里中元素计算自动高度时，会忽略脱离了文档流的元素

相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。

可以通过四个CSS属性对设置其位置：

left
right
top
bottom

盒子的偏移不会对其他盒子造成任何影响。

绝对定位

宽度为auto时，盒子尺寸适应内容。
包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块；若找不到祖先元素的定位元素，则它的包含块为整个网页（初始化包含块）

固定定位

其他情况跟绝对定位完全一样。

包含块不同：固定为视口（浏览器的可视窗口）

定位下的居中

某个方向居中：

定宽（高）
将左右（上下）距离设置为0
将左右（上下）margin设置为auto

绝对定位和固定定位zho，margin为auto时，会自动吸收剩余空间

多个定位元素重叠时

堆叠上下文

设置z-index，通常情况下，值越大，越靠近用户

只有定位元素设置z-index有效

index可以为负数，如果是负数，遇到常规流，浮动元素，则会被其覆盖

输入框：文本框

-type属性：输入框的类型（重点）

type：text·····普通文本输入框

type：password········密码框

type：date·····日期选择框，具有兼容性问题

type：search········搜索框，具有兼容性问题

type：range········滑块框，，可输入最大最小值，JS

type：color········颜色选择框

type：number········数字输入框，只能输入数字，可设置最大最小值，用Max min,还可以设置step，表示增加减少的数字大小

type：CheckBox········多选框，每一个选项就需要用一个checkbox，加上name 属性可以为多选框分组，加上checked可设置默认选型

type：radio·······单选框，加上name 属性可以为多选框分组，加上checked可设置默认选型

type：file·······选择上传文件

-value属性········输入框的值

-placholder属性·······显示提示文本，文本框没有内容时显示

input元素也可以制作按钮：
当type的值为reset（重置按钮），button（普通按钮），submit（提交按钮）时，input表示按钮

select元素（重点）

下拉列表选择框，通常与option 元素配合使用。

<p>
    请选择城市：
    <select >
        <option value="">成都</option>
        <option value="">北京</option>
        <option value="">上海</option>
    </select>
</p>

select表示下拉框，option表示下拉列表的内容

属性值后面加上selset=‘selected’ 表示默认选中的内容

可对列表进行分组，例如：

<p>

 请选择最喜欢的主播
    <optgroup label="才艺表演">
         <option value="">222222</option>
          <option value="">222222</option>
    </optgroup>
    <optgroup label="游戏主播">
        <option value="">222222</option>
        <option value="">222222</option>
   </optgroup>
</p>

<p>

    请选择喜欢的主播
    <select multiple>
    <optgroup label="才艺表演">
        <option value="">222222</option>
    </optgroup>
    <optgroup label="游戏主播">
        <option value="">222222</option>
    </optgroup>
    </select>
</p>

在select 后面加上multiple 表示可选中多个选项

textarea元素（重点）

文本域，多行文本框

<p>
    请填写间接
    <textarea name="" id="" cols="30" rows="10"></textarea>
</p>

按钮元素（重点）

button

type属性：reset,submit, button ,默认值为提交按钮（submit）

 <input type="image" src="./春天的花草.jpg">

 <button>
    <img src="./春天的花草.jpg" alt="">
</button>

两种按钮的不同写法，button按钮更为灵活，可以增加其他元素

表单状态

readonly属性：布尔属性，是否只读，不会改变表单显示样式

disabled属性：布尔属性，是否禁用，会改变表单显示样式

配合表单元素的其他元素

label（较为重点）

普通元素，通常配合单选和多选框的使用

使用两个相同的name 属性可以将属性值分组，

-显示关联：可以通过for属性，让label 元素关联到某一个表单元素，for属性书写表单元素
ID的值。

<p>
  
请选择性别
    <input id="man" name="sexs" type="radio">
     <label for="man"> 男</label>
    <input  id="wowam"   name="sexs" type="radio">
     <label for="wowam"> 女</label>

</p>

-隐式关联：label 元素里面嵌套input元素

<p>  
    请选择性别
    <label for="man"> 
        <input id="man" name="sexs" type="radio">
     男</label>
    <label for="wowam"> 
        <input  id="wowam"   name="sexs" type="radio">
    女</label>
</p>

datalist元素

数据列表，该元素本身不会显示到页面，通常用于和普通文本框配合使用··············比较不常用。

 <p>
	请输入你常用的浏览器：
    <input list="sssss"  type="text">
 </p>
 <datalist id="sssss">
    <option value="chorem">谷歌浏览器</option>
    <option value="IE">IE浏览器</option>
    <option value="Opera">欧朋浏览器</option>
    <option value="Safari">苹果浏览器</option>
</datalist>

form元素

通常会将表单元素，放置到form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。

对开发静态页面没多大意义

美化表单元素

新的伪类

1，focus ······元素聚焦时的样式

按Tab键可以来回切换聚焦元素

加上tabindex可以自动设置切换的顺序

<p>
 
    <a  tabindex="2" href="https://www.baidu.com">Lorem.</a>
</p>
 <p>
     <input   tabindex="1" type="text">
 </p>
 <p>
     <button tabindex="3">提交</button>
 </p>

outline-offset··········表示外边框偏移

当outline-offset=0时，不发生偏移

2，checked···········表示单选或者多选被选中的样式

常见用法

1，重置表单元素样式

2，设置textarea多行文本框是否调整尺寸

resize: horizontal；水平方向的调整

resize: vertical;；垂直方向的调整

resize: both：默认值，两个方向都能调整尺寸

3，文本框边缘到内容的距离

方式1.使用padding 加上内边距

方式2.使用text-indent 设置缩进

4，控制单选和多选的样式

表格元素（table）

在CSS技术出现之前，网页通常使用表格布局

后台管理系统中可能会使用表格

前台：面向用户

后台：面向管理员，对界面要求不高，对功能性要求高

表格不再适用于网页布局的原因：
表格渲染速度过慢

表格的术语：

表格标题：caption

表头：thead

表格主题：tbody

表格尾部：tfoot

表格的行：tr（table row）

标题单元格：th

普通单元格：td

border-collapse·············边框的折叠方式------写在table的CSS属性中

属性值：serperate·········分离
collapse··········折

其他元素

abbr：缩写词
time：提供给浏览器或者搜索引擎阅读的时间
b：以前是一个无语义元素，主要用于加粗字体
q：一小段的引用文本
blockquote：大段引用文本，拥有属性cite，表示引用的来源地址
br：只要用于在文本中换行，无语义
hr：无语义，主要用于分割，可制作分割线
meta元素：还可以用于搜索引擎优化（SEO）
link元素：主要用于链接外部资源（CSS,图标） 1）rel属性：relation，链接的资源和当前网页的关系。2）type属性：表示链接的资源的MIME类型
标题：caption