Html+Css 基础

最新推荐文章于 2022-12-09 21:51:09 发布

gouzhun247

最新推荐文章于 2022-12-09 21:51:09 发布

阅读量180

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/gouzhun247/article/details/79559409

版权

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML

1、编写HTML文件
-<DOCTYPE html> 浏览器解释对应关系
-<html lang="en"> html只能有一个属性
- 注释something

2、标签分类
-自闭合标签 <meta ->
-主动闭合标签

3、head
-<meta -> 编码，刷新，跳转，关键字，描述，IE兼容
-<title>
-<link>
-<style>
-<script>

4、body
-  ><br
-<p>
-<span>
-<h>
-<div>

-input + form
input type='text' - name属性，value="赵凡"
input type='password' - name属性，value="赵凡"
input type='submit' - value='提交' 按钮
input type='button' - value='登录' 按钮

- 单选框input type='radio' value，
- 复选框input type='checkbox' value, checked="checked"，

input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data"

示例：组合提交搜索
<form action="https://www.sogou.com/web" methed='GET' enctype='multi'>
<input type="text" name="query" value="赵凡">
<input type="submit" value="搜索" />
</form>

- a标签
- 跳转
- 锚 href='#某个标签的ID'

- img
src
alt 悬停显示
title

默认img标签，有一个1px的边框
img{
border: 0;
}

- 列表
ul/li
ol/li
dl
dt
dd

- 表格
table
thead
tr
th
tbody
tr
td
colspan = ''
rowspan = ''

- label
用于点击文件，使得关联的标签获取光标
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />

- fieldset
legend

CSS

-编写css样式：
1. 标签的style属性
2. 写在head里面 style标签中写样式
- id选择器
#i1{
background-color: #2459a2;
height: 48px;
}

- class选择器 ******

.名称{
...
}

<标签 class='名称'> </标签>
- 标签选择器
div{
...
}

所有div设置上此样式

- 层级选择器（空格） ******
.c1 .c2 div{

}
- 组合选择器（逗号） ******
#c1,.c2,div{

}

- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }

PS:
- 优先级，标签上style优先，编写顺序，就近原则 CSS

css样式也可以写在单独文件中
<link rel="stylesheet" href="commons.css" />

3、注释
/* */

4、边框
- 宽度，样式，颜色 (border: 4px dotted red;)
- border-left

5、基本属性
height，高度百分比
width，宽度像素，百分比
text-align:center, 水平方向居中
line-height，垂直方向根据标签高度
color、字体颜色
font-size、字体大小
font-weight 字体加粗

6、float
让标签浪起来，块级标签也可以堆叠

<div style="clear: both;"></div>

7、display
display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin


8、padding margin:0 auto

9、position:
a. fixed
b. relative + absolute
<div style='position:relative;'>
<div style='position:absolute;top:0;left:0;'></div>
</div>

10、
opcity: 0.5 透明度
z-index: 层级顺序
overflow: hidden,auto
hover

background-image:url('image/4.gif'); # 默认，div大，图片重复访
background-repeat: repeat-y;
background-position-x:
background-position-y: