HTML&CSS基础

最新推荐文章于 2024-08-18 21:47:24 发布
最新推荐文章于 2024-08-18 21:47:24 发布
阅读量658 收藏 4
点赞数 10
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45020003/article/details/121853243
版权

文章目录

1.HTML常见标签

1.1.font字体标签

  • font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
    color 属性修改颜色
    face 属性修改字体
    size 属性修改文本大小
<body> 
<!-- 字体标签 
需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。 
--> 
    <font color="red" face="宋体" size="7">我是字体标签</font> </body>

1.2.特殊字符

  • < ：&lt;
  • ＞ ：&gt;
  • 空格 : &nbsp;
  • 换行：<br>
<body> <!-- 特殊字符
需求 1：把 <br> 换行标签 变成文本 转换成字符显示在页面上 
-->
    我是&lt;br&gt;标签<br/> 你好 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;帅啊! </body>
  • <ins>:插入，默认样式下横线，类似于填空题给横线
  • <em>：强调，默认样式斜体
  • <del>：删除，默认样式中间横线

1.3.标题标签

  • 标题标签是 h1 到 h6 ，h1 最大， h6 最小
  • align 属性是对齐属性
    1. left 左对齐(默认)
    2. center 剧中
    3. right 右对齐
<body> <!-- 标题标签 
        需求 1：演示标题 1 到 标题 6 的
        h1 - h6 都是标题标签 
--> 
    <h1 align="left">标题 1</h1>
    <h2 align="center">标题 2</h2>
    <h3 align="right">标题 3</h3> 
    <h4>标题 4</h4>
    <h5>标题 5</h5>
    <h6>标题 6</h6>
</body>

1.4.超链接

在网页中所有点击之后可以跳转的内容都是超连接

  • a 标签是 超链接

     href 属性设置连接的地址
 target 属性设置哪个目标进行跳转
     _self 表示当前页面(默认值)
     _blank 表示打开新页面来进行跳转

<body> 
<a href="http://localhost:8080">百度</a><br/>
    
<a href="http://localhost:8080" target="_self">百度_self</a><br/> 
    
<a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
    
</body>
  • 空链接:用#在href中占位
<a href="#">空链接</a>			//回到顶部
  • 网页元素链接:可以给图片等元素添加链接
<a href="http://www.sogou.com">
    <img src="rose.jpg" alt="">
</a>
  • 锚点链接: 可以快速定位到页面中的某个位置.
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
   第一集剧情 <br>
   第一集剧情 <br>
   ...
</p>
<p id="two">
   第二集剧情 <br>
   第二集剧情 <br>
 ...
</p>
<p id="three">
   第三集剧情 <br>
   第三集剧情 <br>
 ...
</p>

  • 禁止 a 标签跳转:

    <a href="javascript:void(0);"> 或者 <a href="javascript:;">

1.5.列表标签

  • 有序列表 ol

  • 无序列表 ul

    ol , ul对应列表项 li

  • 自定义列表 dl

    对应列表项 dd

<h3>无序列表</h3>
<ul>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ul>
<h3>有序列表</h3>
<ol>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ol>
<h3>自定义列表</h3>
<dl>
    <dt>我的老婆们</dt>
    <dd>咬人猫</dd>
    <dd>兔总裁</dd>
    <dd>阿叶君</dd>
</dl>

在这里插入图片描述

1.6.img标签

  1. 在javase中路径分为相对路径和绝对路径
    相对路径：从工程名开始算
    绝对路径：盘符：/目录/文件名
  2. 在web中路径分为相对路径和绝对路径
    a. 相对路径：
    . 表示当前文件所在的目录
    ..表示当前文件所在的上一级目录
    文件名 表示当前文件所在的目录的文件，相当于./文件名 ( ./可以省略 )
    b. 绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如

磁盘路径 D:\rose.jpg

网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.img标签.html</title>
</head>
<body>
    <img src="../imgs/1.jpg" width="200" height="250" border="1"/>  
    <img src="../imgs/2.jpg" width="200" height="250"/>  
    <img src="../imgs/3.jpg" width="200" height="250"/>   
    <img src="../imgs/4.jpg" width="200" height="250"/>   
    <img src="../imgs/5.jpg" width="200" height="250"/>
</body>
  • img标签是图片标签，用来显示图片
  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
  • title: 提示文本. 鼠标放到图片上, 就会有提示.
  • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">

1.7.表格标签

  1. table 标签: 表示整个表格
  2. tr: 表示表格的一行
  3. td: 表示一个单元格
  4. th: 表示表头单元格. 会居中加粗
  5. thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
  6. tbody: 表格得到主体区域.

这些属性都要放到 table 标签中.

  1. align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)

  2. border 表示有边框(数字越大, 边框越粗), “none” 表示没边框.

  3. cellpadding: 内容距离边框的距离, 默认 1 像素

  4. cellspacing: 单元格之间的距离. 默认为 2 像素

  5. width / height: 设置尺寸.

cellspacing 设置单元格间距

<body>
<table border="1" width="300" height="300">
<tr>
			<th>1.1</th>
			<th>1.2</th>
			<th>1.3</th>
		</tr>	
<tr>
			<td>2.1</td>
			<td>2.2</td>
			<td>2.3</td>

		</tr>	
<tr>
			<td>3.1</td>
			<td>3.2</td>
			<td>3.3</td>

		</tr>
</table>
</body>

1.8.表格跨行跨列

  • 跨行合并: rowspan=“n”
  • 跨列合并: colspan=“n”
<body>   
<table width="500" height="500" cellspacing="0" border="1">
    <tr>
				<td colspan="2">1.1</td>

				<td>1.3</td>
				<td>1.4</td>
				<td>1.5</td>
			</tr>
    <tr>
				<td rowspan="2">2.1</td>
				<td>2.2</td>
				<td>2.3</td>
				<td>2.4</td>
				<td>2.5</td>
			</tr>
    <tr>

				<td>3.2</td>
				<td>3.3</td>
				<td>3.4</td>
				<td>3.5</td>
			</tr>
    <tr>
				<td colspan="2" rowspan="2">4.1</td>

				<td>4.3</td>
				<td>4.4</td>
				<td>4.5</td>
			</tr>
			<tr>


				<td>5.3</td>
				<td>5.4</td>
				<td>5.5</td>
			</tr>


		</table>
</body>

在这里插入图片描述

1.9.iframe标签

  1. iframe标签可以在页面上开辟一个小区域显示一个单独的页面

  2. iframe和a标签一起使用的步骤：

①在iframe标签中使用name属性定义一个名称

②在a标签的target属性上设置iframe的name属性值

<body>
<iframe src="5.img标签.html" width="500" height="400" name="abc"></iframe>
<br/>
    <ul>
    <li><a href="6.表格标签.html"target="abc">6.表格标签.html</a></li>
        
    <li><a href="7.表格跨行跨列.html" target="abc">7.表格跨行跨列.html</a></li>
    </ul>
</body>

注：在下面点击超链接，可在上面窗口显示对应页面内容。

1.10.排版标签

  • div ：独占一行，是个大盒子
  • span：不独占一行，一个小盒子

1.11.表单列表

  • 什么是表单？

表单就是HTML用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

分成两个部分:

  • 表单域: 包含表单元素的区域. 重点是 form 标签.

  • 表单控件: 输入框, 提交按钮等. 重点是 input 标签.

表单设置需要的标签：

1. form标签

描述了要把数据按照什么方式, 提交到哪个页面中.

<form action="test.html">
   ... [form 的内容]
</form>
2. input标签
  • type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
  • name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
  • value: input 中的默认值.
  • maxlength: 设定最大长度.

（1）文本框

<input type="text">

（2）密码框

<input type="password">
/**是密码输入框（无法看见密码内容）*/

（3）单选框

<input type="radio" name=“sex”>男
<input type="radio" name=“sex”>女

name相同的input视为一组，互相互斥，name不同，互不影响
checked="checked"表示默认选中，用户没选之前，自动选中一个

注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果.

（4）复选框

<input type="checkbox" name="爱好" value="1"> 吃饭 
<input type="checkbox" name="爱好" value="2"> 睡觉 
<input type="checkbox" name="爱好" value="3">打游戏

（5）普通按钮

<input type="button" value="我是个按钮">

（6）提交按钮

<form action="http://www.baidu.com">
    <input type="text" name="username">//必须写name,允许重复
    <input type="submit" value="提交">
  	<div>
        <button>点击提交</button>
    </div>
</form>
  • 提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
  • url:路径？query-string（查询字符串）
  • ？query-string本身是可选的：发生在form表单提交之后
  • 格式：?key=value （value是用户输入进去的）
  • 当有多个查询字符串，用&连接

在这里插入图片描述

（7）重置按钮

<input type="reset" value="重置"/>

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.

（8）选择文件

<input type="file">
3. lable 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 提升用户体验

<label for="male">男</label>
<input id="male" type="radio" name="sex">
4. select 下拉列表框

option 中定义 selected=“selected” 表示默认选中.

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>

textarea表示多行文本输入框（其实是标签和结束标签中间才是内容）
rows可以显示几行的高度
cols可以显示几个字符的宽度

学习路线

HTML学习网站

Web开发技术

iconfont图标

2.CSS

2.1.基本语法规范

<style>
    p {
        /* 设置字体颜色 */
        color: red;
        /* 设置字体大小 */
        font-size: 30px;
   }
</style>
<p>hello</p>

2.2.引入方式

1.内部样式表

style 标签可以放到页面任意位置. 一般放到 head 标签内.

优点：这样做能够让样式和页面结构分离.

缺点：分离的还不够彻底. 尤其是 css 内容多的时候.

2.行内样式表

缺点是不能写太复杂的样式.

<style>
    div {
        color: red;
   }
</style>
/*行内样式表*/
<div style="color:green">想要生活过的去, 头上总得带点绿</div>
3.外部样式

实际开发中最常用的方式.

  • 创建一个 css 文件.
  • 使用 link 标签引入 css
<link rel="stylesheet" href="index.css">

rel:定义当前文档与被链接文档之间的关系，在这里指定为“stylesheet”，表示被链接的文档是一个样式文件。

href:定义所链接的外部样式表文件的url，可以是相对路径，也可以是绝对路径。

优点: 样式和结构彻底分离了.

缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效.

4.代码风格约定
/*1.紧凑格式*/
h3{ color： deeppink;font-size:20px;}
/*2.展开格式（推荐）全部小写，{前有空格，属性值前有空格*/
h3 { color: deeppink;
  font-size: 20px;
}

2.3.CSS基础选择器

1. 标签选择器
  • 标签选择器（元素选择器）是指用HTML标签名作为选择器，按标签名进行分类，为页面中某一类标签指定统一的CSS样式
标签名 {
属性1：属性值1;
属性2：属性值2;
}
div {
	color: pink;
	font-size: 14px;
}
2. 类选择器
  • 类选择器使用==“ . ”(英文的点号)==后面跟类名
.类名 {
属性1：属性值1;
属性2：属性值2;
}
<p class= '类名'></p>

注意：

a. 长名称或词组可以使用中横线来为选择器命名

b. 多个类型选择器：各个类名中间用空格隔开

3. id选择器
  • id选择器使用#进行标识，后面紧跟id名
  • 元素的id值是唯一的，只能对应于文档中的某一具体元素
#id名 {
属性1：属性值1;
属性2：属性值2;
}
<p id="id名"></p>

例如：id为box的div会变成粉色
/*样式*/
# box{
  color : pink;
}
/*标签*/
<div id = "box"></div>
4. 通配符选择器
  • 通配符选择器用* 表示，就是选择所有的标签
  • 注意：*会匹配页面所有元素，降低页面响应速度，不建议随意使用。

通常通配符定义CSS样式，用来清除所有HTML标记的默认边框。

*{
margin : 0;  /*定义外边距*/
padding : 0; /*定义内边距*/
}
5. 基础选择器总结
作用缺点使用情况用法
标签选择器选出相同的标签不能差异化选择较多p{color:red;}
类选择器可选出1个或多个标签可以根据需求选择非常多.box{color: red;}
id选择器一次只能选择1个标签只能使用一次不推荐使用#box{color: red;}
通配符选择器选择所有的标签选择的太多，有部分不需要不推荐使用*{color: red;}

2.4.CSS复合选择器

1.后代选择器
  • 用来选择元素，或者元素组的子孙后代
  • 其写法：先写爷爷，父亲，再写儿子，孙子，中间用空格隔开
h1 em {color:red;}
/*会把作为 h1 元素后代的 em 元素的文本变为 红色。
其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中*/

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
2.子元素选择器
  • 只能选择作为某元素子元素的元素
  • 写法：父级标签在前面，子级标签在后面，中间用>连接
  • 这里的子元素，只代表亲儿子，不包括孙子之类的元素
<head>
   <style>
        div>h2 {
            background-color: rgb(238, 164, 177);
        }
        div>a{
            background-color: rgb(77, 161, 187);
        }
    </style>
</head>
<body>
/*h2是div的亲儿子，所以背景色会奏效，a标签在这里是div的孙子，不奏效*/
    <div>
        <h2>二级标题</h2>
    </div>
    <div>
        <span><a href="#">我是一个链接</a></span>
    </div>
</body>

在这里插入图片描述

3.并集选择器
  • 利用并集选择器，可以让代码更简洁，通过,连接而成，通常用于集体声明
.one , p, #test { color : red; }

表示 .one , p, #test 这三个选择器都会执行颜色为红色

4.交集选择器

h3.class{ color:red; font-size:25px;}

  • 第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
5.链接伪类选择器
  • 用于某些选择器添加特殊的效果，写的时候，尽量按照lvha的顺序书写，否则可能出错
    a:link :未访问的链接
    a:visited：已访问的链接
    a:hover：鼠标移动到链接上
    a:active：选定的链接
<head>
   <style>
       a{
           font-weight: 700;
           font-size: 16px;
           color: gray;
           text-decoration: none;/*清除链接默认下划线*/
       }
       a:hover{
           color: hotpink;/*鼠标经过的时候，字体由灰色变为粉色*/
       }
    </style>
</head>
<body>
    <div>
        <a href="www.baidu.com">百度</a>
    </div>

</body>

在这里插入图片描述
在这里插入图片描述

2.5.font字体

1. font-size
  • font-size属性用于设置字体大小
  • 谷歌浏览器默认文字大小为16px
  • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确的大小，不要默认大小，一般给body指定整个页面的文字大小
p{
	font-size: 20px;
}
2. font-family
  • font-family属性设置哪一种字体
p{
	font-family: '宋体';
}
3. font-weight
属性描述
normal默认值（不加粗）
bold定义粗体（加粗的）
100~900400=normal,700=bold
4. font-style
属性作用
normal默认值，浏览器会显示标准字体样式
italic斜体
5. font
  • font综合设置字体样式
  • 注意：使用font属性时，必须按照下面语法样式的顺序书写，不能更换顺序，各个属性以空格隔开
  • 其中字号font-size和字体 font-family必须同时出现
选择器{
	font: font-style  font-weight  font-size  font-family;
}
.box{
  	font: 'italic' 700 14px '微软雅黑'
}

2.5.CSS外观属性

1. color
  • color用于定义文本的颜色
  • 常用16进制写法：#f0(红色简写)
属性属性值
预定义颜色值red,green,bule,pink
十六进制#FF0000，#FF6600
RGBrgb(255,0,0) 或者rgb(100%,0%,0%)
2. text-align
  • text-align用于设置文本内容的水平对齐方式
  • 注意：text-align :center是让盒子里面的文本内容水平居中，而不是让盒子居中
属性详情
left左对齐
right右对齐
center居中对齐
3. line-height
  • line-height用于设置行间距，一般称为行高
  • 一般情况，行距比字号大7~8像素就可以了

在这里插入图片描述

行高=上距离+内容高度+下距离

上距离和下距离相等，这样文字是居中显示的

  • 可以使用display:flex；布局方式让文本内容水平垂直居中
display:flex；
align-items:center;
justify-content:center;
4. text-indent
  • text-indent 属性用于设置首行文本的缩进
  • 建议使用em作为设置单位
  • 1em就是一个字的宽度，首行缩进2em
5.text-decoration
  • text-decoration通常我们用于给链接修改装饰效果
属性值描述
none默认，常用于取消下划线
underline下划线，链接常常自带
overline文本上的一条线（不用）
line-through穿过文本的一条线（不常用）
<style>
.a1 {
	text-decoration:none;/*取消链接的下划线*/
}
</style>
<a href="http://www.baidu.com" class="a1">百度</a>

2.6.标签显示模式

HTML标签一般分为块标签和行内标签两种类型，他们也称为块元素和行内元素

1.块级元素

常见的块元素有：h1~h6，p，div，ul，ol，li 等

块级元素的特点：

  • 独占一行
  • 高度，宽度，外边距，内边距都可以控制
  • 宽度默认是容器（父级宽度）的100%
  • 是一个盒子，里面可以放行内或者块级元素
  • 注意：只有文字才能组成段落，因此 < p >标签里面不能放块级元素，h1~h6，dt 都是文字类块级标签，里面不能放其他块级元素
2.行内元素

也称为内联元素
常见的行内元素有a ，strong，b，em，i，del，s ，ins ，u ， span

行内元素的特点：

  • 相邻的行内元素在一行上，一行可以显示多个
  • 高度，宽度直接设置是无效的
  • 默认宽度就是它本身内容的宽度
  • 行内元素只能容纳文本或者其他行内元素

注意：

  • 链接里面不能再放链接
3.行内块元素

在行内元素中这几个特殊元素: img，input，td，可以对他们设置宽高和对齐属性，也可以把他们看成是行内块元素

行内块元素特点：

  • 和相邻的行内元素（行内块元素）在一行上，一行可以显示多个
  • 默认宽度就是它本身内容的宽度
  • 高度，宽度，外边距，内边距都可以控制
4.标签显示模式转换
  • 块转行内：display:inline;
  • 行内转块：display:block;
  • 块，行内元素转为行内块：display:inline-block;

三种模式总结：

元素模式元素排列设置样式默认宽度
块级元素一行放一个可以设置宽度，高度容器的100%
行内元素一行放多个不可以直接设置宽度，高度本身内容的宽度
行内块元素一行多个可以设置宽度，高度本身内容的宽度

2.7.CSS背景（background）

1.背景颜色
background-color:颜色值;
/*默认值是transparent    透明的*/

div {
      background-color: pink;
    }
2.背景图片

语法：
background-image:none | url(url);
例如：
background-image: url("image1.png");

3.背景平铺

background-repeat:repeat | no-repeat | repeat-x | repeat-y

参数作用
repeat背景图片在纵向和横向上平铺（默认）
no-repeat背景图片不平铺
repeat-x背景图片在横向上平铺
repeat-y背景图片在纵向上平铺
4.背景位置

background-position:length || position

参数值
length百分数 /长度值
positiontop / center / bottom / left / center / right 方位名词

注意：

  • == 必须先指定background-image属性==
  • position后面是x,y坐标，也可以是方位名词或精确单位
  • 如果指定两个值，两个值都是方位名词，则这两个值前后顺序无关，如 left top 和 top left效果一样
  • 如果position后面是精确坐标，第一个肯定是x，第二个肯定是y
5.背景半透明

background:rgba(0,0,0,0.3);

  • 最后一个参数是alpha透明度，取值范围0~1之间
  • 也可以简写成：background:rgba(0,0,0,.3);
  • 注意：背景半透明是指盒子背景半透明，盒子里面内容不影响

opacity: .2

  • 设置opacity元素，他的所有后代元素会随着一起具有透明性（一般用于调整图片或者模块的整体不透明度）

2.8.盒子模型

1. 盒子模型
  • 把HTML页面的布局元素看做是一个矩形的盒子
  • 盒子模型组成元素：边框border，内边距padding，外边距margin，元素内容content
  • 当设置box-sizing:content-box;时，采用标准模式计算
  • 当设置box-sizing:border-box;时，你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。
  • 元素实际大小计算：
    内容宽度：height = content height + padding + border
    内容高度：width = content width +padding + border
  • 盒子实际大小：
    内容宽度和高度 + 内边距 + 边框
    在这里插入图片描述
2.盒子边框
属性作用
border-width定义边框粗细，单位为px
border-style边框样式
border-color边框颜色

边框样式：

  • none：没有边框（默认值）
  • solid：边框为单实线（常用）
  • dashed：边框为虚线
  • dotted：边框为点线
3.内边距
属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距
4.外边距
属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

块级盒子水平居中：

  • 盒子必须指定宽度
  • 然后给左右的外边距都设置auto
    如：margin:auto;
一颗大米粒儿
关注
  • 10
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
HTML & CSS 个人网页设计
m0_54492359的博客
10-27 7444
大学生期中项目-----个人网页设计。 网页中图片来自于wallhaven网站，部分手绘均为临摹制作。 效果展示 部分代码展示 <div> <table id="t_2"> <tr align="center"> <td><a href="per_1.html">个人主页</a></td> <td><a href="per_2.html">兴趣爱好</a
页面中color颜色值_HTML+CSS 基础知识-入门概括-颜色与单位
weixin_29416629的博客
01-13 2145
颜色与单位一、颜色1、概述色调：很接近通俗意义上的颜色。 是指图像的相对明暗程度，在彩色图像上表现为颜色 ​ 饱和度：是指颜色中灰色的含量。 饱和度最大时，颜色中灰色的含量为零；饱和度最小时，颜色基本就是灰色。也就是说，饱和度与灰色的占比是成反比的。（可以理解为，纯度越高,表现越鲜明,纯度较低,表现则较黯淡） ​ 亮度：是指颜色中黑色的含量。 亮度最大时，颜色中黑色的含量为零。亮度最小时，颜色会变...
前端HTML5/HTML+CSS3/CSS学习笔记(六)
weixin_51227348的博客
02-23 2256
前端HTML5/HTML+CSS3/CSS学习笔记(六)
HTML & CSS基础
weixin_52730784的博客
01-13 141
目录 01 | 前端简介 02 | HTML简介 01 | 前端简介 1.软件开发类型:C/S B/S 2.软件开发流程 -网页设计师根据需求出图 -前端工程师将图制作成网页 -后端工程师改为动态 / 前端自己改 /给后端提需求,用接口改 3.前端组成 4.所需工具 -浏览器 -编辑器:记事本、NotePad++、HBuilder -调试工具:FireBug -图片工具:photoshop 02 | HTML简介 1.HTML基本格式 ①包含标签html和子标签head,body <h.
“从零开始的HTML 表格”——WEB开发系列09
一条晒干的咸鱼的博客
08-14 1045
HTML 表格是一种用于在网页上组织和显示信息的结构性元素，它能够将数据以行和列的形式呈现，帮助用户更清晰地理解数据关系。表格在展示统计数据、产品列表、日程安排等方面非常实用。
响应式Web设计：纯HTML和CSS的实现技巧
vvvae1234的博客
08-18 467
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
HTML补充——表格&表单
Fan_web的博客
08-14 1499
本文补充了HTML中的一些表格和表单的标签，下文继续分享CSS中的动画知识内容。
HTML及CSS面试题4
2301_78675670的博客
08-14 1122
一些常见的HTML+CSS面试题及参考答案，对于有面试需求的小伙伴们来说，是一份比较不错的例题参考
2：html：基础语法2
2301_76578848的博客
08-15 1383
首先，表头的话是使用标签，但是他同样也是一行，所以表头，应该在下面，也就是说，要先创建一个行，然后再写自己想要的表头。可以看到其他的上面是一样的，在中是新的，代表是一张表格，然后代表是一行，是一行中的一个个模块，然后第二个指的是第二行的内容，结果就是如下。这个就是我的主页面中我的头像，你看到还有之前学的照片的运用方式，同样，在网页中，我们习惯性的将他分成一个一个块，然后每一个快都是用的标签进行操作。还有没有我们经常用的边框，与表头。
HTML静态网页成品作业(HTML+CSS)——原神介绍设计制作(4个页面)
2301_78945238的博客
08-18 626
HTML静态网页成品作业(HTML+CSS)——原神介绍设计制作(4个页面)
HTML静态网页成品作业(HTML+CSS)——美食企业介绍设计制作(1个页面)
2301_78945238的博客
08-18 234
HTML静态网页成品作业(HTML+CSS)——美食企业介绍设计制作(1个页面)
HTML左右分页更新【搬代码】
weixin_52001174的博客
08-12 1021
html左右分页最新代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; box-sizing: border-box;
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
2301_78945238的博客
08-15 374
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
HTML知识点——CSS中几种常用的选择器
qq_62859013的博客
08-15 279
CSS中的几种常用的选择器
JS（三）——更改html内数据
初叙
08-15 262
JavaScript更改html内数据
使用HTML和cgi控制I.MX6ULL开发板上的LED
kaneki_lh的博客
08-14 234
在led.html网页中输入设备号为1，操作指令为1则可开灯，操作指令为0则关灯。
探索HTML中的“iframe”标签——WEB开发系列12
最新发布
一条晒干的咸鱼的博客
08-18 782
现代网页开发中，​​​​ 标签是一个非常重要的工具。允许我们在一个网页中嵌入另一个网页，对于展示外部内容、应用嵌套或实现复杂的布局设计都非常有用。来一起探讨如何使用 ​​iframe​​ 标签，包括设置高度和宽度、移除边框，以及如何用 ​​iframe​​​ 来显示目标链接页面。
HTML常用标签和CSS的运用，以及使用HTML做一个简历
FHY26828的博客
08-18 859
HTML（超文本标记语言）是一种用于创建网页的标准标记语言，以及使用html做一份简历
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值