HTML+CSS基础

最新推荐文章于 2024-06-04 09:39:22 发布

小田要变强

最新推荐文章于 2024-06-04 09:39:22 发布

阅读量926

点赞数 26

文章标签： html css 前端

本文链接：https://blog.csdn.net/2401_82398807/article/details/136149556

版权

一、HTML

1.1基本语法

//单标签
 <img> 、<input>、<br>、<link>、<meta> 
//双标签
<html></html>、<head></head>、<title></title>、<div></div>、<p></p>、<h1></h1><h2></h2>...<h6></h6>、<ul><lul>、<o></ol>、<form></form>、<table></table>、<select></select>、<textarea></textarea>

1.1.1分区

<div></div>划分页面区域，独占一行
<span></span>对于文本独立修饰，不占多余的空间区域

1.1.2标题

<h1></h1>-<h6></h6>标题

1.1.3段落

<p></p>段落

1.1.4图像

<img src="图片地址" alt="内容" title="内容" width="200" height="200">

alt:当图片加载失败没有显示或未找到该图片出来时会显示当前内容
title：鼠标移动到图片（加载失败也可以）上，会对图片显示介绍内容
width、height：对图片宽高进行自定义

注意：即使只定义了width或height，图片也会等比例改变另一个值，不会让图片失真。

1.1.5列表

有序列表
<ol type="1" start="3">
	<li>内容</li>
	<li>内容</li>
	<li>内容</li>
</ol>

注意：

li里面可以随意放标签，但是ol里面只能放置li
默认的数字是自动生成的
type:1，a，A，i，I
start:取值只能是一个数字

无序列表
<ul type="disc">
	<li>内容</li>
	<li>内容</li>
	<li>内容</li>
</ul>

注意：

ul里面只能放li，li里面可以放其他标签
默认的是黑色实心圆
type：disc（默认），circle（圆圈），square（实心方块），none（不显示）

自定义列表
<dl>
	<dt>图片</dt>
	<dd>文字</dd>
</dl>

注意：一对dl中建议放一对图片和文字，多放可再建dl。

1.1.6超链接

<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档">内容</a>
<a>
	<img  >也可在其中引用图片
</a>

href中可自己引用路径，和图片引用方式一样
target=“_self” 默认值
target=“_blank” 新窗口打开

1.1.7表单

<form action="地址"（向何处发送表单数据） method="GET(获取数据，安全性不高，能看见)/POST（传输数据，安全性高，看不见数据）">
	显示在输入格前面的内容：<input type="test(普通文本，能看见内容)/password(密码，看不见输入内容)，name="传输数据的名称" placeholder="内容"（提示信息）>
	<input type="submit" value="内容"（此处内容显示为提交的内容）>/<button type="submit">内容</button>[提交]
	<input type="reset" value="内容"(和提交一样)>/<button type="reset">内容</button>[重置]
	<input type="button" value="内容">[普通按钮]
</form>

注意：name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器。

1.1.8表格

<table>
	<tr>
		<td>内容</td>
		<td>内容</td>
	</tr>					//一行两列
	<tr>
		<td>内容</td>
		<td>内容</td>
	</tr>					//一行两列
</table>

注意：

一个tr创建一行，一个td创建一个单元格
此时创建的并没有表格的横线，只有其中的内容
只有在td标签里面可以随意加东西，table中只能放tr，tr中只能放td

1.1.9输入框

单选框
<div>
	<input type="radio" name="aaa" checked="checked">满意
	<input type="radio" name="aaa">不满意
</div>

注意：

单选框一定要给一组选项起同一个名字，即name一样，否则可以多选，同一组name只可以选择一个
checked="checked"也可以写成checked，表示默认选择，一般用于修改信息时的原信息

<div>
	<input type="radio" name="bbb" id="man">
	<label for="man">男</label>
	<input type="radio" name="bbb" id="woman">
	<label for="woman">女</label>
</div>

用label可以实现点圆圈后面的内容即可选上该选项，要给选项起一个id，for填上id名称。

多选框
<div>
	<input type="checkbox" name="aaa" checked>html
	<input type="checkbox" name="aaa" checked>css
	<input type="checkbox" name="aaa">js
</div>

注意：同一组一般起同一个name，以便于传输数据。

<div>
	<input type="checkbox" name="aaa" id="html">
	<label for="html">html</label>
	<input type="checkbox" name="aaa" id="css">
	<label for="css">css</label>
	<input type="checkbox" name="aaa" id="js">
	<label for="js">js</label>
</div>

<input type="file"> 上传文件
<input type="image"> 图片按钮（代替提交按钮<input type="submit">）要用form指明提交地址
<input type="hidden"> 隐藏按钮 带给后端个人信息
<button disabled="disabled">注册</button>禁用按钮
<input type="radio" disabled>不满意 被禁用，不能选该选项
<input type="text" disabled value="">被禁用，只能看见里面的内容，不能往里面输入内容
<input type="text" readonly value="">只读，只能看见里面的内容，不能往里面输入内容

1.1.10选择框

<select size="" multiple>
	<option value="">山东</option>
	<option value="">山西</option>
	<option value="">河北</option>
</select>

select支持属性

size,显示几个，不能选择几个
multiple,可以选择多个，无此属性只可以选择一个，选择多个时需按着ctrl或shift配合鼠标选择

option支持属性

value,提供给后端需要用的value值
selected,默认选择，不写默认选择第一个，有multiple时可以默认选择多个，否则只可以默认选择一个

<fieldset>
	<legend>性别</legend>
	<input type="radio" name="aa">男
	<input type="radio" name="aa">女
</fieldset>

注意：

fieldset是一个有缺口的边框，可用css设置边框样式、大小
legend是显示在边框缺口内容，也可用图片，可用css设置样式、位置
下面即写边框里面的选项

1.1.11文本域

<textarea cols="" rows="" placeholder>value</textarea>

注意：

cols、rows属性一般不写，而用css控制文本域的大小
placeholder提示文字
默认value写在双标签内部，注意空格问题，故textarea标签一般不换行

二、CSS

2.1引入方式

2.1.1行内样式表

<h1 style="color:red;"></h1>

注意：

可直接写入行中对此标签内属性修改。
属性：属性值；分号必不可少。

2.1.2内部样式表

<style>
	选择器（选择符）{
	属性:属性值;
	属性:属性值;
	}
</style>

注意：

上部分放在head标签中。
属性必须放在花括号中，属性与属性值用冒号连接。
当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开。在书写样式中，空格、换行符等操作不影响属性显示。

2.1.3外部样式表

<link rel="stylesheet" type="text/css" href="css所在路径">
<style>
	@import url(css所在路径)；
</style>

注意：

这两种方法都是写在head中。
推荐使用第二种。
要在html外部建立文件夹，文件夹中放css文件，文件中书写css代码。

2.2选择器

要使用CSS对HTML页面中的元素实现一对一，一对多或多对一的控制，这就需要用到CSS选择器。

2.2.1标签选择器

元素名称{属性:属性值;}

2.2.2类选择器

<style>
	.类名1{
		color:red;
		background-color:yellow;
	}
	.类名2{
		background-color:blue;
	}
</style>

<div class="类名1 类名2"></div>
<div class="类名2 类名1"></div>

注意:

此时背景色都为蓝色，标准是style中的顺序。
style中类名前面要加 . ,在下文标签运用时不需要。
一个标签中可以调用多个类，中间以空格隔开。类名要为英文。

2.2.3id选择器

<style>
	#box1{
		background-color:yellow;
	}
	#box2{
		background-color:red;
	}
</style>

<div id="box1"></div>
<div id="box2"></div>

注意：

多个id的名字不要重复，每个id名字要唯一。
style中类名前面要加 # ,在下文标签运用时不需要。 id名字要用英文。

2.2.4群组和后代选择器

div,p,h1,.box1,#id{
	background-color:red;
}

注意：

对所有这些标签进行属性修改。
即使某个标签在另一个标签里面，这个标签的属性也会被改变。

div p{
	background-color:blue;
}

注意：

只对div中p标签属性作用。
先找到所有的p，在看是否在div中，从右到左匹配选择。

div.box{}

注意：对div并且是box作用

2.2.5伪类选择器

<style>
a:link{
	属性：属性值;（超链接的初始状态）
}
a:visited{
	属性：属性值;（超链接被访问后的状态）
}
a:hover{
	属性：属性值;（鼠标悬停，即鼠标划过超链接时的状态）
}
a:active{
	属性：属性值;（超链接被激活时的状态，即鼠标按下时超链接的状态）
}
</style>

注意：四个顺序不可改变。

2.2.6选择器优先级

从大到小：
!important–>内联样式–>包含选择符（为包含选择符的权重之和）–>id选择器–>class选择器–>类型选择器

当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。
相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。

2.3单位

px：像素是最常用的单位，它表示屏幕上的一个物理像素点。在不同设备上，1像素可能对应不同的物理尺寸，但在同一设备上，像素是一个相对固定的单位。
%：百分比单位是相对于父元素的尺寸进行计算的。
em：em单位是相对于元素的字体大小进行计算的。
rem：rem单位是相对于根元素(即html元素)的字体大小进行计算的。与em不同，rem单位的计算不会受到父元素字体大小的影响。

vw和vh：vw和vh单位分别表示视口宽度和视口高度的百分比。视口是指浏览器窗口或设备屏幕的可见区域。例如，如果一个元素的宽度设置为50vw，那么它的宽度将是视口宽度的一半。

小田要变强

关注

26
点赞
踩
32

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSS基础

例如，如果一个元素的宽度设置为50vw，那么它的宽度将是视口宽度的一半。：像素是最常用的单位，它表示屏幕上的一个物理像素点。在不同设备上，1像素可能对应不同的物理尺寸，但在同一设备上，像素是一个相对固定的单位。：rem单位是相对于根元素(即html元素)的字体大小进行计算的。要使用CSS对HTML页面中的元素实现一对一，一对多或多对一的控制，这就需要用到CSS选择器。：百分比单位是相对于父元素的尺寸进行计算的。：em单位是相对于元素的字体大小进行计算的。target=“_blank” 新窗口打开。
复制链接

扫一扫