Day02 html

最新推荐文章于 2024-11-14 15:33:48 发布

八旬老战士

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量92

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_55901407/article/details/114641814

版权

Day02 html

常用标签

head：内容给浏览器识别

span {更方便的为元素添加样式

正常显示

行内元素

}（为body中的元素添加颜色）

body: 内容给用户看

属性：

bgcolor：背景颜色

background：背景图片

（背景图片会同时覆盖背景颜色）

路径：

进入某个路径下：路径名字/

回到上一层路径：…/

格式化标签

b 加粗加粗

u 下划线下划线

i 斜体斜体

del 删除线 ~~删除线~~

strong 强调显示为加粗 强调，加粗

sup 上标 ^上标

sub 下标 _下标

address 语义化标签

语义化标签

显示为斜体显示为斜体

通常用来定义地址通常用来定义地址

块儿元素块儿元素

水平线

换行

pre 预处理标签保留文本编写格式

锄禾
				日当午

列表ul;ol

ul 无序列表

li定义列表项

列表项标记：在ul标签上添加type属性：desc 实心圆点（默认）

circle 空心圆点

square 实心方块

ol 有序列表

列表项标记：在ol列表上使用属性type属性：1 a A I i

[注意：在ul，ol列表的直接子元素只能为li标签，而li标签可以镶嵌任意元素]

以下为列：

<h1>平成假面骑士</h1>
    <ul>
        <li>空我</li>
        <li>远光狗</li>
        <li>龙骑</li>
        <li>555</li>
        <li>法爷</li>
    </ul>

<h1>平成新十年骑士</h1>
    <ol>
        <li>艾克赛德</li>
        <li>战兔</li>
        <li>时王</li>
        <li>
            <ul>
                <li>宇宙男</li>
                <li>沃兹</li>
                <li>月骑</li>
                <li>帝骑</li>
            </ul>
        </li>
    </ol>

龙骑
空我
法爷
帝骑

迪迦
奥迪
赛文
赛罗

表格 tatle

表格：用来展示数据

table 标签

tr 行

th 表格头单元格剧中加粗

td 表格体单元格

属性：

border（边框） px（像素）

align：

tatle 整个表格的水平对齐方式

tr 这一行中所有单元格中的文本在单元格中的水平对齐方式

th ，td 单元格中的文本在单元格中的水平对齐方式

weigh：宽度

height：高度

center：居中对齐

left：左对齐 right：右对齐

justify：两端对齐

【可以作用在tatle或者tr/td】

bordercolor：边框颜色

cellspacing：边框外边距

cellpadding：边框内边距

【样式：style=“border-collapse：cellapse” 双线变成单线】

bgcolor：背景颜色 table td tr

<tr bgcolor="#a52a2a">

<td bgcolor="#a52a2a">语文</td>

合并单元格：

rowspan：跨列

<th colspan="">课程表</th>  跨5列

colspan：跨行

<td rowspan="3">上午</td>  跨3列

表单 form

表单：手机用户输入的数据

form 表单标签

语法：

<form action="">
        
    </form>

属性：

action：提交位置

name：表单的名字

method：提交方式：get：表单中收集到的数据并提交，默认；相对效率较高；不安全；大小有限制

post：请求实体中；安全；大小没有限制

enctype：在发送到后台之前要不要对字符进行编码（默认编码）

在当前表单内存在文件上传的时候，需要修改enctype的值

表单元素：

定义在form中的标签元素，被称为表单元素

大部分的表单元素都是由input标签提供的，type属性不同的值决定这个input标签的不同作用

input：

1. type：

text：普通文本

password：密码框

file ：文件上传

（如果上传的文件：enctype属性值-》enctype="mutipart/form-data"证明不编码，否则默认编码）

submit：提交

hidden：隐藏框

button：按钮（结合js使用)

onlick：事件会在按钮被点击时发生

reset：重置（恢复到初始状态）

姓名：<input type="text" name="username" >

密码：<input type="password" name="mima">

2. name：

radio：单选框（一组只能选择一个，name属性相同就为一组）name 和value必须添加

男

女

checkbox：多选框，（分组，name属性值相同为一组） name与value必须添加

属性：

id：html页面中的元素唯一标识结合js使用

class：结合css使用

name：能够提交元素到后台的表单元素，必须添加name属性，后台区分的唯一

value：表单元素的默认值

多行文本域：textarea

提示字：placeholder

下拉列表/框：select ；下拉列表中的选项：option

1 2 3

fieldset 分组

legend 分组标题

（可以使用在form标签中，也可以使用在标签外）

分组标题

button 标签默认提交

type属性的值可以定义为 submit reset button

提交

重置

按钮

区别 input

label定义标注

for属性的值与对应要进行绑定的标签id属性保持一致

男

常用属性

autofocus自动聚焦

maxlength 最大长度不能超过几个字节

姓名：

required 必填属性

placeholder 提示字

默认选中：

单选框；多选框：checked

下拉框：selected

readonly：只读不能修改可以提交

disabled：禁用不能修改不能提交显示为灰色

css

css层叠样式

为html中的元素标签添加样式

语法：

选择器{

样式

}

选择器：

根据某种规则中选中一些一个元素

样式：

属性名：属性值；

样式名：样式值；

css的引入方式：

行内样式表：style="" css代码定义在style的属性值上

内部样式：在head中，定义一对style标签对，标签对中定义css代码

外部样式：定义一个css文件定义css代码。在html中head下用link途径引入

引入方式优先级：

水距离元素最近，就优先显示谁，因为代码从上到下加载。

基础选择器

基础选择器：

#id选择器：根据元素的id属性值，选中一个元素

.class选择器：根据元素class属性值，选中一个或者一组元素*****

class属性的值：可以为一个值列表->值1 ：值2 ：值3

元素标签选择器：根据标签名选中一个或者一组元素

*通配符：匹配到页面中的所有元素

清楚浏览器默认效果

padding：0

margin:0

}

基础选择器的优先级：id>class>元素>通配符