HTML+CSS

最新推荐文章于 2024-10-04 06:11:34 发布

有梦想的笨笨

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量107

点赞数

文章标签： html css javascript Powered by 金山文档

本文链接：https://blog.csdn.net/2201_75474092/article/details/129491606

版权

这篇文章详细列举了HTML的基础标签，包括标题、文本样式、列表、表格和表单等，并介绍了CSS的基础选择器和样式设置，如颜色、字体、边框和文本属性。内容适用于初学者了解和回顾HTML和CSS的基本知识。

摘要由CSDN通过智能技术生成

前言:

在清理草稿时发现了以前写的这篇html和css笔记,虽然写的乱七八糟的,但是还发布吧记录一下

HTML：

基础标签：

<html></html>,创建一个HTML文档;

<head></head>,设置文档标题和其它在网页中不显示的信息;

<title></title>,设置文档的标题;

<h1></h1>,最大的标题;

<pre></pre>,预先格式化文本;

<u></u>,下划线

<b></b>,黑体字;

<i></i>,斜体字;

<tt></tt>,打字机风格的字体;

<cite></cite>,引用,通常是斜体;

<em></em>,强调文本(通常是斜体加黑体);

<strong></strong>,加重文本(通常是斜体加黑体);

<font,size="",color=""></font>,设置字体大小从1到7,颜色使用名字或RGB的十六进制值;

<basefont></basefont>,基准字体标记;

<big></big>,字体加大;

<small></small>,字体缩小;

<strike></strike>,加删除线;

<code></code>,程式码;

<kbd></kbd>,键盘字;

<samp></samp>,范例;

<var></var>,变量;

<blockquote></blockquote>,向右缩排;

<dfn></dfn>,述语定义;

<address></address>,地址标记;

<sup></sup>,上标字;

<sub></sub>,下标字;

<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)

<plaintext>...</plaintext>固定宽度字体(不执行标记符号);

<listing>...</listing>,固定宽度小字体;

<font,color=00ff00>...</font>字体颜色;

<font,size=1>...</font>最小字体;

<font,style,='font-size:100,px'>...</font>无限增大.

列表标签：

无序列表：

<ul>

<li>Coffee</li>

</ul>

有序列表：

<ol>

<li>Coffee</li>

</ol>

自定义列表：

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

表格标签：

<table></table>,创建一个表格;

<tr></tr>,表格中的每一行;

<td></td>,表格中一行中的每一个格子;

<th></th>,设置表格头:通常是黑体居中文字;

<table,cellspacing="">,设置表格格子之间空间的大小;

<table,border="">,设置边框的宽度;

<table,cellpadding="">,设置表格格子边框与其内部内容之间空间的大小;

<table,width="">,设置表格的宽度.用绝对像素值或总宽度的百分比;

<table,align="">,设置表格格子的水平对齐方式(left,center,right,justify);

<tr,align="">,设置表格格子的水平对齐方式(left,center,right,justify);

<tr,valign="">,设置表格格子的垂直对齐方式(baseline,bottom,middle,top);

<td,colspan="">,设置一个表格格子跨占的列数(缺省值为1);

<td,rowspan="">,设置一个表格格子跨占的行数(缺省值为1);

<td,nowrap>,禁止表格格子内的内容自动断行;

<caption></caption>,表格的标题;

<colgroup></colgroup>,定义多个列为一组列;

<table></table>,创建一个表格;

<thead></thead>,定义表格的页眉;

<col>,定义一个列组中的列，以便对它们能够同时设置有关属性;

<tbody></tbody>,定义一个表格的实体;

<tfoot></tfoot>,定义一个表格的页脚;

表单标签：

<form></form>,创建表单;

action="...",接收数据的服务器的URL;

method="...",HTTP的方法(get,,post),其中get是被反对使用的;

enctype="...",指定MIME(Internet媒体类型);

οnsubmit="...",当提交表单时发生的内部事件;

noreset="...",在重新设置表单时发生的内部事件;

target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)

<select,multiple,name="name",size=""></select>,创建滚动菜单,size设置在需要滚动前可以看到的表单项数目;

<option>,设置每个表单项的内容;

<select,name="name"></select>,创建下拉菜单;

<textarea,name="name",cols=40,rows=8></textarea>,创建一个文本框区域,列的数目设置宽度,行的数目设置高度;

<input,type="checkbox",name="name">,创建一个复选框,文字在标签后面;

<input,type="radio",name="name",value="">,创建一个单选框,文字在标志后面;

<input,type=text,name="foo",size=20>,创建一个单行文本输入区域,size设置以字符串的宽度;

<input,type="submit",value="name">,创建提交(submit)按钮;

<input,type="image",border=0,name="name",src="name.gif">,创建一个使用图象的提交(submit)按钮;

<input,type="reset">,创建重置(reset)按钮;

<button></button>,创建一个按钮;

disabled="...",把按钮的状态设置为不能;

name="...",按钮的控制名,value="...",按钮的值;

type="...",按钮的类型(button,,submit,,reset);

<fieldset></fieldset>,把相互关联的控件组合成一组;

<isinde>,提示用户输入;

<label></label>,为一个控件提供标签;

<legend></legend>,为FIELDSET元素指定一标题;

<select></select>,为用户做选择创建各个选项;

<textrea></textrea>,创建一个允许用户多行输入的区域.

数据提交：

<!DOCTYPE html>

<head>

</head>

<body>

<br>

<br>

性别：

<input type="radio" name="sex" value="male">男

<input type="radio" name="sex" value="female" checked>女

<br>

爱好：

<input type="checkbox" name="hobby" value="smoke" checked>抽烟

<input type="checkbox" name="hobby" value="drink" >喝酒

<input type="checkbox" name="hobby" value="perm" > 烫头

<br>

<br>

</form>

</body>

</html>

CSS

基础选择器：

基本格式：

选择器{属性1:属性值1;
属性2:属性值2;
属性3:属性值3;······}

行内式

<h2style="font-size:20px;color:green;">
    这个二级标题的字体大小为20像素，颜色为绿色。
</h2>

内嵌式

<head>
<styletype="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
······
}</style>
</head>

链入式

<head>
<linkhref="文件路径" type="text/css" rel="stylesheet"/>
</head>

选择器权重与匹配规则：

权重（优先级）：

!important(慎用) > 内联样式 > 内部样式表 > 外部样式表

选择器分类

id选择器 #id - 唯一性 _连接复合单词

类选择器 .class - 可以出现多次 -连接复合单词

多类名使用方法：

标签选择器（元素选择器）：p{} p，h1{}

通配符选择器 *

属性选择器 []

派生选择器

并列选择器

分组选择器

选择器

后代选择器：

子选择器：

并集选择器：

伪类选择器：

链接伪类选择器

focus伪类选择器：

属性

宽高

字体：

fonts（用于定义字体系列、大小粗细和文字样式（如斜体））：

fonts-family：设置字体系列

fonts-size：定义字体大小

fonts-weight：字体粗细

fonts-style：字体样式

颜色：color

边框

文本：

文本对齐：text-align

left：左对齐

right：右对齐

center：居中对齐

line-height:垂直居中

文本装饰：text-decoration

none：默认，无装饰线

underline：下划线，链接<a>自带下划线

overline：下划线

line-through：删除线

文本缩进：

text-indent //文本首行缩进多少距离

行间距：

line-height

光标

背景

表格形式

CSS中元素显示模式：

块元素：

常见块元素：<h1>~<h6>、<p>、<div>(较为典型)、<ol>、<ul>、<li>

块元素特点：

①比较霸道，独占一行

②高度、宽度、外边距及内边距都可以控制

③宽度默认是容器（父级宽度的100%）

④是一个容器及盒子，里面可以放行内或者块级元素

行内元素：

行内块元素

元素模式的转换：

背景：

背景颜色

背景图片

背景平铺

有梦想的笨笨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫