美文网首页
HTML 与css

HTML 与css

作者: 卿酌南烛_b805 | 来源:发表于2020-08-21 08:37 被阅读0次

🐞HTML常用代码:

<html>                        #开始

<head>                             #元素包含了所有的头部标签元素。

<meta>                           #元素

<title>                           #标签定义了不同文档的标题。

<h1>                            #定义最大的标题。 <h6>                           # 定义最小的标题。

<hr>                            #标签在 HTML 页面中创建水平线。

<!--这是一个注释-->                           #注释

<style>                            #标签定义了HTML文档的样式文件引用地址

<meta>                           # 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

<body>                           #可见正文内容

<p>                           #这是一个段落

<base> #定义了页面链接标签的默认链接地址

例:<base href="//www.runoob.com//images/" target="_blank">

该标签指定了页面上所有链接的默认URL,所以该图片的访问地址为

"http://www.runoob.com/images/


<a>                            #链接标签,如果使用target 属性,你可以定义被链接的文档在何处显示。

例:<a href="https://www.runoob.com">这是一个链接使用了 href 属性</a>

书签:<a id="tips">提示部分</a>      <a href="#tips">跳到提示部分</a>



<b>                           #粗体文本

<code>                           #计算机代码

<em>                           #强调文本

<i>                           #斜体文本

<kbd>                           #键盘输入

<pre>                           #预格式化文本

<small>                           #更小的文本

<strong>                           #重要的文本

<abbr>                            #缩写

<address>                            #联系信息

<bdo>                            #文字方向

<blockquote>                            #从另一个源引用的部分

<cite>                            #工作的名称

<del>                            #删除的文本

<ins>                            #插入的文本

<sub>                            #下标文本

<sup>                            #上标文本

<img> #图像标签,是空标签,意思是说,它只包含属性,并且没有闭合标签,要在页面上显示图像,你需要使用源属性(src)。

alt 属性用来为图像定义一串预备的可替换的文本。

例:<img src="boat.gif" alt="Big Boat">,表示boat图片如果没有加载成功的话,现实BigBoat文本。


height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

例:<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">



<table> 标签来定义表格, <tr>表示行, <td>表示单元格,<td>之间的内容是数据。

<th> 表格的表头,<thead>页眉<tbody>主体<tfoot>页脚

<caption> 标签定义表格的标题



<ul>                            #无序列表使用的标签

<ol>                           # 有序列表始于的标签

<li>                             #定义列表项

<dl>                            #自定义列表标签开始

<dt>                            #自定义列表项目

<dd>                            #定义自定列表项的描述

<div>                            #元素是块级元素,它可用于组合其他 HTML 元素的容器。

<span>                            #元素是内联元素,可用作文本的容器。



<form>                           #定义供用户输入的表单,多数情况下被用到的表单标签是输入标签(<input>)输入类型是由类型属性(type)定义的。

例:<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>



<input type="radio">                            #标签定义了表单单选框选项

<input type="checkbox">                            #定义了复选框

<input type="submit">                           # 定义了提交按钮.

<textarea>                             #定义文本域 (一个多行的输入控件)

<fieldset>                           # 标签可以将表单内的相关元素分组,并使用外框包含起来。

<legend>                               #定义了 <fieldset> 元素的标题

<select>                               #定义了下拉选项列表

<optgroup>                           #  定义选项组

<option>                           #    定义下拉列表中的选项

<button>                               #定义一个点击按钮

<iframe>                           #表示框架,height 和 width 属性用来定义iframe标签的高度与宽度。

frameborder                           # 属性用于定义iframe表示是否显示边框。

🦚CSS常见代码:


Css规则由两个主要的部分构成:选择器,以及一条或多条声明。

CSS声明总是以分号(;)结束,声明总以大括号({})括起来。

CSS注释以"/*" 开始, 以 "*/" 结束。

如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

decoration                                                            #装饰,overline上划线、line-through中划线、underline;下划线

margin:                                                                 #外边距

cursor:                                                                #光标的样式有很多种

border  2px solid #a1a1a1;                                                 #边框的粗细,实线

background:#dddddd;                                                           #背景颜色

padding:10px 40px;                                                          #内边距

width:300px;                                                                    #宽度

border-radius:25px;                                                             #圆角

box-shadow: 100px 100px 1px #888888;                                        #添加阴影

background-image: url(img_flwr.gif), url(paper.gif);                            #图片背景

background-position: right bottom, left top;                                #图片的位置

background-repeat: no-repeat, repeat;                                    #重复次数

background-size:80px 60px;                                            #图片的大小

background-size:100% 100%;                                       #表示完全拉伸填充

background-clip                                         #背景剪裁属性是从指定位置开始绘制。

linear-gradient                                      #线性渐变 默认是从上到下,to right从左到右to bottom right从左上到右下

数字deg                                                                  #将创建的渐变调整角度

rgba(255,0,0,0),rgba(255,0,0,1)                         #函数中的最后一个参数可以是从0 到 1 的值代表设置透明色

radial-gradient                                                        #径向渐变从中间到周围

word-wrap:break-word                              #文本强制换行

column-count                                      #属性指定了需要分割的列数。

column-gap                                        #属性指定了列与列间的间隙。

column-rule-style                                   #属性指定了列与列间的边框样式:

column-rule-width                                  #属性指定了两列的边框厚度:

column-rule-color                                  #属性指定了两列的边框颜色

column-span:all                                    #跨越所有列

column-width                                      #属性指定了列的宽度。

transform:rotate(30deg)                            #顺时针旋转30度,可以输入负值逆时针旋转

transform:rotateX(120deg);                         #延X轴顺时针旋转120度

transform:translate(50px,100px)                     #位置变为50px.100px

transition: width 2s                                 # 应用于宽度属性的过渡效果,时长为 2 s

div:hover                             #规定当鼠标指针悬浮(:hover)于 <div>元素上时展示效果

max-width: 100%;

height: auto;                                   #自适应窗口大小

Opacity                                            #不透明度

filter                                         #属性用为元素添加可视效果 (例如:模糊与饱和度) 。

font-size                                    #属性来设置按钮大小

border-radius                                #属性来设置圆角按钮:

flex-container      flex-item                                 #弹性盒子

@media screen     max-width:min-width:                    #当最大像素,最小像素时生效

相关文章

  • 前端书单

    HTML 《Head First HTML与CSS》 CSS 《CSS揭秘》《CSS世界》 JS 《JavaScr...

  • 2020-11-27

    关于HTML、CSS与JS 1 HTML、CSS与JS定义 HTML(Hyper Text Markup Lang...

  • 前端必读书籍推荐

    HTML 与 CSS 《Head First HTML与CSS(第2版)》--豆瓣评分 9.3。入门真的是经典书籍...

  • 面试题一览

    HTML与CSS HTML与CSS常用编译工具 原生js h5 React Vue ES6 javascript框...

  • CSS的简介

    -为什么要用CSS 什么是CSS CSS与HTML的关系 CSS语法 为什么要用CSS 什么是CSS CSS与HT...

  • HTML基础语法

    HTML 与 CSS 主要内容 HTML ​ HTML(HyperText Markup Language)就...

  • HTML5+CSS3+jQuery Mobile轻松构造APP与

    《HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站》以HTML与CSS为主,配合jQuer...

  • HTML 与 CSS

    HTML 与 CSS 主要内容 HTML ​ HTML(HyperText Markup Language)就是超...

  • css 和JS

    * CSS* CSS的简介* 层叠样式表。* CSS与HTML的结合(4种)* HTML的标签提供了属性style...

  • CSS初探16

    Head First HTML与CSS 第十一章 布局与定位 CSS——掌控页面的表现 CSS表格显示 CSS表格...

网友评论

      本文标题:HTML 与css

      本文链接:https://www.haomeiwen.com/subject/vrgyjktx.html