HTML5+CSS3 非常全的笔记

最新推荐文章于 2023-10-23 08:00:00 发布

樂笒

最新推荐文章于 2023-10-23 08:00:00 发布

阅读量620

点赞数 1

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/m0_49413017/article/details/116771198

版权

本文详细介绍了HTML5和CSS3的基础知识，包括HTML5的语义化标签、多媒体标签、表单控件，以及CSS3的选择器、字体属性、布局技巧和新特性。通过实例演示了如何创建注册页面、新闻页面，以及如何使用定位、浮动和布局模式实现复杂设计。此外，还探讨了CSS3的高级技巧如精灵图、字体图标、三角形制作等，以及CSS用户界面样式和元素显示隐藏的策略。

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

HTML5

vsco的使用

新建文件（crtl+n）
保存（ctrl+s）
生成页面（感叹号） tap键确定
利用插件预览（“open in defalut browser”）

常用标签

标题标签《h1》
段落标签《p》
换行标签《br/》

黑色加粗为推荐使用

加粗《strong》

加粗《b》

倾斜《em》

倾斜《i》

删除线《del》

删除线《s》

下划线《ins》

下划线《u》

是没有语义的，只是一个盒子装内容

《div》表示分区，大盒子

《span》表示跨度，小盒子

图像标签

《Img src = “ 图像rul”/》
alt 替换文字
title 鼠标放上去显示的文字
width 宽度，height高度，border

超链接标签

《a》超链接标签

<a href = "跳转目标" target = "目标窗口弹出方式">文本或图像</a>

——blank 新窗口打开

井号空链接
href里面是文件或压缩包，会下载文件

锚点链接

<a href = "#two">

<h3 id = "two">

注释

<!-- xxx -->

快捷用法： ctrl + /

特殊字符

空格：&nbsp
小于号：&lt
大于号：&gt
和号：&amp

表格标签

表格用来展示数据

表格基本语法

<table> // 定义表格
    <tr>  //定义行
        <th>XXX</th> //表头
        <td>//定义单元格
        ...
        </td>
    ...
    </tr>
</table>

表格属性
- align （left，center，right）对齐方式
- border （1，空）边框
- cellpadding 字和表格

先书写表格结构，后书写表格属性。

表格结构

《thhead》
《thbady》

合并单元格

跨行合并：rowspan = “合并个数”

跨列合并：colspan=“合并个数”

步骤

先确定是跨行还是跨列合并
找到目标单元格，写上方式和数量
删除多余单元格

列表标签

《ul》无序

《ol》有序

《li》列表项

ul里面只能放li

自定义列表

<dl>
    <dt>名词</dt>
    <dd>解释</dd>
    <dd>解释</dd>

如何使用看关系

表单标签

完整的表单
- 表单域（包含表单元素的区域）
  - 《from》标签
  - 会把范围内的表单元素信息提交给服务器
- 表单控件
- 提示信息
表单域语法

    <form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>

表单控件
- input输入表单元素（type，name，value，checked，maxlength）
  - 文本：text
  - 密码：password
  - 单选按钮：radio（需要相同name）
  - 复选框：checkbox
  - 提交按钮：submit
  - 重置按钮：reset
  - 按钮：button
  - 提交文件：file
- select 下拉表单元素
  - 至少包含两个选项
  - 定义selected= “selected”时为默认选项
- textarea 文本域元素

《lable》

增加用户体验

        <label for="text">用户名：</label><input type="text" id="text"><br>

for和id对应

select 语法

        <select>
            <option>sb</option>
            <option>1</option>
            <option>2</option>
        </select>

实战（注册页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
</head>
<body>
    <h4>注册页面</h4>
    <table  width= "600" >
        <!-- 第一行 -->
        <tr>
            <td>姓名</td>
            <td><input type="text" value="请输入名字"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <label for="radio">哥哥</label><input type="radio" name="1" id="radio">
                <label for="2">妹妹</label><input type="radio" name="1" id="2">
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请输入年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                    <option>--请输入月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>                
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="填写你的城市"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚烟状态</td>
            <td>
                <input type="radio" name="marry" checked="checked">未婚<input type="radio" name="marry">已婚<input type="radio" name="marry">离婚
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历：</td>
            <td><input type="text" value="请输入"></td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" name="love" > 游戏
                <input type="checkbox" name="love" > 音乐
                <input type="checkbox" name="love" > 摄影
                <input type="checkbox" name="love" > 跑步
                <input type="checkbox" name="love" > 唱歌
                <input type="checkbox" name="love" > 运动
            </td>
        </tr>
         <!-- 第七行 -->
         <tr>
             <td>个人简述</td>
             <td>
                 <textarea name="个人简介"></textarea>
             </td>
         </tr>
         <!-- 第八行 -->
         <tr>
             <td></td>
             <td>
                <input type="submit" value="免费注册">
             </td>
         <

最低0.47元/天解锁文章

樂笒

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3 非常全的笔记

文章目录HTML5vsco的使用常用标签图像标签超链接标签锚点链接特殊字符表格标签列表标签表单标签实战（注册页面）CSS3书写规范css选择器基础选择器标签选择器类选择器id选择器通配符选择器复合选择器后代选择器(很重要)子选择器（重要）并集选择器（重要）伪类选择器链接伪类选择器focusw伪类选择器CSS字体属性字体系列字体样式字体大小字体粗细复合形式文本属性文本颜色对其文本装饰文本文本缩进行间距CSS引入方式内部样式表（嵌入式）内联样式表（行内式）外部样式表案例新闻页面CCS的元素显示模式行内块元素显示
复制链接

扫一扫

专栏目录