HTML简单常用的标签,及CSS简单的涉及

HTML:

概述:HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。

标签:

块元素标签(行元素): 在布局中默认会占一行,宽度默认等于父级的宽度,块元素需要换行排列

1.标题标签:表示文档标题,除具有块元素基本特征外,还有默认外边距和字体大小

2.段落标签,表示文档中的一个文字段落,除了有块元素基本特性外,还有默认外边据

3.通用快容器标签,表示文档中的一块文字段落,具有块元素基本特性,没有默认样式

内联元素标签(行内元素):元素之间可以排列在一行,设置高度无效,他的高度由内容决定撑开

1.超级链接标签,链接到另一个网页,具有内联元素基本特性,默认文字蓝色,有下划线

2.通用内联容器标签,具有内联元素基本特性,没有其他默认样式

3.图片标签,在网页中插入图片,具有联元素基本特性,但是他支持宽高设置

大于: & gt 下于 & lt 空格 &nbsp

标签:

带语义的标签

1、h1~h6:表示标题2、p:表示段落3、img:表示图片4、a:表示链接

不带语义的标签

1、div:表示一块内容2、span:表示行内的一块内容

所以我们要根据网页上显示的内容,使用适合的标签,可以优化之前的代码。

列表:

ul > li 无序块级列表

ol > li 有序块级列表

dr > dt > dd dt表头 dt列表内容 自定义列表

form表单:

<form action=' 定义表单提交地址" method='提交方式' >

input定义表单通用元素,type属性决定用处:

type属性:

​ text: 单行文本输入框

​ password:密码输入框

​ radio:单选框(多个选项,需要name 值相同)

​ checkbox:复选框(多选题)

​ file:上传文件

​ submit:提交按钮

​ reset:重置按钮

​ button:普通按钮

input的属性 value='表单元素的值' name='表单元素的值'

<textarea> 定义多行文本输入框

<select> 定义下拉列表

​ option下拉列表中的选项

表单css属性:outline: none placeholder:输入输入框的默认文字

表格:

<table> 声明表格

<tr> 行

<th>表头

<td>内容

border-collapse 设置边线合并

css

载入方式: 1.内联式: 标签的 style属性

​ 2.嵌入式: 通过style 标签进行创建

​ 3.外联式: 通过link标签,链接外部样式文件

选择器:

​ 1.标签选择器 :直接书写标签

​ 2.类选择器: 值前面添加一个点 标签属性创建class

​ 3.id选择器: 之前面加# 标签属性id 创建

​ 4.层级选择器:父类与子类 之间 空格 隔开

​ 5.分组选择器:逗号隔开

​ 6.伪类选择器:hover 鼠标 触动事件

box样式:

内容,width ,height,background...

内边框 padding

边框:border

外边距:magin

文本样式:

color(颜色),font-size(字体大小);font-family(字体样式,font-weight(加粗0-700),line-height(行高),text-decoration(下划线)text-algin(对齐),text-index(首行缩进)

display用来设置元素的类型及隐藏的:

​ none 隐藏且不占位置

​ inline元素以行内元素显示

​ block 元素以块元素显示

overflow设置溢出元素:

​ visible默认 内容不会修改,会曾现在框外面

​ hidden 内容修剪,溢出部分不显示

​ scroll内容被修剪,浏览器以滚动条显示

​ auto 自动全部显示内容

float 浮动:left,right 不占位置

position 元素的定义类型通

通过top bottom left right 移动(可通过z-index进行设置层级)3

​ relative 相对定位

​ absolute 绝对定位 根据父级元素进行定位,没有父类,根据body进行定位

​ fixed 固定定位 脱离文档流,不占位置

opacity 设置透明的(0-1)

权重等级:

​ 内联样式 :标签style设置权重值 1000

​ id选择器:#id名 权重值 100

​ 类,伪类 a:hover权重值10

​ 标签选择器:div.p 权重值1

猜你喜欢

转载自blog.csdn.net/weixin_43115821/article/details/82844861