HTML/CSS快速入门

最新推荐文章于 2024-03-22 19:14:59 发布

橘子不秃头！

最新推荐文章于 2024-03-22 19:14:59 发布

阅读量475

点赞数 2

本文链接：https://blog.csdn.net/qq_51257284/article/details/109373593

版权

一、HTML

超文本标记语言。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

1.1 HTML标签介绍

1.标签又分为，单标签和双标签。
i. 单标签格式： <标签名 /> br 换行 hr 水平线
ii. 双标签格式: <标签名> …封装的数据…</标签名>
2.标签名大小写不敏感。
3.标签拥有自己的属性。
i. 分为基本属性： bgcolor=“red” 可以修改简单的样式效果
ii. 事件属性： οnclick=“alert(‘你好！’);” 可以直接设置事件响应后的代码。

1.2 常用标签–font字体标签

font 标签是字体标签 , 它可以用来修改文本的字体（face） , 颜色（color） , 大小（size）

<font size="4" color="blue" face="黑体">啦啦啦</font>

1.3 特殊字符

在这里插入图片描述

1.4 超链接

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

href 属性设置连接的地址
target 属性设置哪个目标进行跳转（_self 表示当前页面 ( 默认值 )、_blank 表示打开新页面来进行跳转）
也可将target属性设为内联框架名称，跳转页面将展示在内联框架中

<!--打开新页面进行跳转-->
<a href="http://www.baidu.com" target="_blank">baidu</a>
<!--将图片作为超链接，点击图片后跳转新页面-->
 <a href="http://www.baidu.com" target="_blank">
        <img src="C:\Users\20159\Pictures\Saved Pictures\3.jpg" width="100" height="70" border="2" />
    </a>

1.5 列表标签

ul 是无序列表、ol是有序列表
type 属性可以修改列表项前面的符号
li 是列表项

	<ul style="list-style:none"><!--去掉了列表前的符号-->
        <li>无序列表num1</li>
    </ul>
    <ol>
        <li>有序num1</li>
    </ol>

1.6 img标签

img 标签可以在 html 页面上显示图片

src 属性可以设置图片的路径
width 属性设置图片的宽度
height 属性设置图片的高度
border 属性设置图片边框大小
alt 属性设置当指定路径找不到图片时 , 用来代替显示的文本内容
相对路径 :
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件 , 相当于 ./ 文件名
绝对路径 : 盘符：/ 目录 / 文件名

1.7 表格标签

border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
th 是表头标签
tr 是行标签
td 是单元格标签
align 设置单元格文本对齐方式
colspan 属性设置跨列
rowspan 属性设置跨行

    <table border="1" cellspacing="0" align="left" width="340" height="200">
        <tr>
            <th>num1</th>
            <th>num2</th>
            <th>num3</th>
        </tr>
        <tr>
            <td>neirongyi</td>
            <td>neironger</td>
            <td rowspan="2">neirongsan</td>
        </tr>
        <tr>
            <td colspan="2">neirongsi</td>
        </tr>
    </table>

1.8 iframe框架标签

ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面.
ifarme 和 a 标签组合使用的步骤:
1 在 iframe 标签中使用 name 属性定义一个名称
2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值

<iframe src="HTMLPage2.html" width="300" height="350" name="hhh" align="right" frameborder="0"></iframe>
    <a href="C:\Users\20159\Pictures\Saved Pictures\3.jpg" target="hhh">点击此处在内敛框架中展示图片
    </a>

1.9 表单标签

表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.

input type=“text” 是文件输入框 value 设置默认显示内容
input type=“password” 是密码输入框 value 设置默认显示内容
input type=“radio” 是单选框 name 属性可以对其进行分组
checked="checked"表示默认选中
input type=“checkbox” 是复选框 checked="checked"表示默认选中
input type=“reset” 是重置按钮 value 属性修改按钮上的文本
input type=“submit” 是提交按钮 value 属性修改按钮上的文本
input type=“button” 是按钮 value 属性修改按钮上的文本
input type=“file” 是文件上传域
input type=“hidden” 是隐藏域
当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中 textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST

1.10 其它标签

div 标签默认独占一行
span 标签它的长度是封装数据的长度
p 段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）

二、CSS

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2.1 CSS语法规则

在这里插入图片描述
例如：
p{
color:red;
font-size:30px;
}

2.2 CSS与HTML结合

第一种：
在标签的 style 属性上设置”key:value value;”，修改标签样式。

<div style="border: 1px solid red;">div 标签 1</div>

第二种：
在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

<head>
.......
	<style>
        div{
            border:1px solid red;
        }
    </style>
</head>
<body>
	<div>div标签一</div>
</body>

第三种：
把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用

<link rel="stylesheet" type="text/css" href="1.css"/><!--相对路径-->

2.3 CSS选择器

1.标签名选择器：

标签名{
	属性：值;
}
如：
<style>
	div{
		border: 1px solid yellow;
		color: blue;
		font-size: 30px;
	}
</style>
使用：
<div>哈哈哈</div>

2.id选择器：

#id 属性值{
	属性：值;
}
使用：
<div id="id名称">哈哈哈</div>

3.class选择器：

. class 属性值{
	属性：值;
}
使用：
<div class="class名称">哈哈哈</div>

4.组合选择器：

选择器 1，选择器 2，选择器 n{
	属性：值;
}

2.4 常用样式

字体颜色： color：red;
宽度/高度： width:20px / 100%; height:20px / 100%;
背景颜色： background-color:#0F2D4C；
字体大小： font-size: 20px;
边框（红色一像素实线边框）： border：1px solid red;
div居中： margin-left: auto; margin-right: auto;
文本居中： text-align: center;
超链接去下划线： text-decoration: none;
表格细线：
table {
border: 1px solid black; 设置边框
border-collapse: collapse; 将边框合并
}
td,th {
border: 1px solid black; 设置边框
}
列表去除修饰：
ul {
list-style: none;
}

橘子不秃头！

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
HTML/CSS快速入门

一、HTML超文本标记语言。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）1.1 HTML标签介绍1.标签又分为，单标签和双标签。i. 单标签格式： <标签名 /> br 换行 hr 水平线ii. 双标签格式: <标签名> …封装的数据…</标签名>2.标签名大小写不敏感。3.标签拥有自己的属性。i. 分为基本属性： bgcolor=“red” 可以修改简单的样式效
复制链接

扫一扫