HTML+CSS整理

winter_65

已于 2022-07-29 23:15:10 修改

阅读量159

点赞数

文章标签： html css 前端

于 2022-07-28 19:40:53 首次发布

本文链接：https://blog.csdn.net/winter_65/article/details/125956557

版权

本文详细介绍了HTML的基础语法，包括文本元素、图像、链接、表格和表单元素。在CSS部分，讲解了选择器、文字属性、样式表分类、块元素、行内元素、背景属性以及CSS3的新特性，如新选择器、伪类和伪元素选择器。此外，还涵盖了HTML5的新特性，如多媒体标签和新增的input表单类型。

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

HTML

一、基础语法：

1.html标准格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标准格式</title>
    <style>
     
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

二、文本元素

<h1></h1>~<h6></h6>标题文本
<p></p>段落
<br/>换行
<b></b>加粗；<i></i>斜体;<u></u>下划线显示
<div></div>内容独占一行（盒子盒子）
<span></span>一行可以多个的盒子

三、图像和链接

· 图像标签：

<img src="路径" title="提示文本（鼠标放在图像上会显示的文字）" alt="替换文本（图片出不来的时候出现的字）" width="宽度100px" height="高度50px" border="边框粗细1">

ps：属性不分先后顺序

【路径问题】

尽量把照片放在html同一个文件夹里然后就可以直接用同一级路径也就是直接是名称就可以了

·链接：

1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。

2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。

3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。

4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中，设置属性值为 #名字的形式，如<a href="#two"> xxx </a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：<h3 id="two">xxx</h3>

四、表格和表单元素

·表格元素·

<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0" cellpadding="0">
{属性：左中右对齐，宽度，高度，边框，单元格之间的距离,单元格和内容之间的距离}
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>           
    </table>
</body>

合并单元格：

1.跨行rowspan=“合并个数”

2.跨列colspan=“合并个数”

列表：

标签名	定义	说明
`<ul> </ul>`	无序标签	里面只包含li，没有顺序，li里面可以包含任意标签
`<ol> </ol>`	有序标签	里面只包含li，有顺序，li里面可以包含任意标签
`<dl> </dl>`	自定义列表	里面只包含dt和dd，dt和dd里面可以放任何标签

·表单元素·

</form>

<input type="属性” />

属性值	描述
button	可点击按钮
checkbox	复选框
file	输入字段和浏览按钮，供文件上传
hidden	隐藏输入字段（密码的时候用）
image	图像提交按钮
password	密码，字符会被隐藏
radio	单选按钮（当取一样的name时就是单选）
reset	定义重置按钮
submit	定义提交按钮，提交按钮会把表单数据