【HTML+CSS】基础知识

最新推荐文章于 2024-02-08 10:28:07 发布
最新推荐文章于 2024-02-08 10:28:07 发布
阅读量302 收藏 1
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amethystlmy9/article/details/107381946
版权

1.HTML基础知识

html基本结构

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

常用的标签

1 .h1，2，3，4，5 标题标签
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
</body>

效果：
在这里插入图片描述

2. p 段落标签
<body>
    <p>asdkkjdkfjdkfjadlkjfadfj假大空拉家带口熬枯受淡九分裤拉就是东风路卡绝地反击奥德赛副科级拗口的九分裤垃圾是打发绝地反击阿多少经费埃里克杀第四经发局收款方kadjfieuejcknfmcnvmvvnvnvkvakldjfadf</p>
    <p>asdkkjdkfjdkfjadlkjfadfj假大空拉家带口熬枯受淡九分裤拉就是东风路卡绝地反击奥德赛副科级拗口的九分裤垃圾是打发绝地反击阿多少经费埃里克杀第四经发局收款方kadjfieuejcknfmcnvmvvnvnvkvakldjfadf</p>
    <p>asdkkjdkfjdkfjadlkjfadfj假大空拉家带口熬枯受淡九分裤拉就是东风路卡绝地反击奥德赛副科级拗口的九分裤垃圾是打发绝地反击阿多少经费埃里克杀第四经发局收款方kadjfieuejcknfmcnvmvvnvnvkvakldjfadf</p>
    <p>asdkkjdkfjdkfjadlkjfadfj假大空拉家带口熬枯受淡九分裤拉就是东风路卡绝地反击奥德赛副科级拗口的九分裤垃圾是打发绝地反击阿多少经费埃里克杀第四经发局收款方kadjfieuejcknfmcnvmvvnvnvkvakldjfadf</p>
    <p>asdkkjdkfjdkfjadlkjfadfj假大空拉家带口熬枯受淡九分裤拉就是东风路卡绝地反击奥德赛副科级拗口的九分裤垃圾是打发绝地反击阿多少经费埃里克杀第四经发局收款方kadjfieuejcknfmcnvmvvnvnvkvakldjfadf</p>
   
</body>

效果

在这里插入图片描述

3.br 换行标签
 <p>asdkkjdkfjdkfjadlkjfadfj假大空拉家带口熬<br>枯受淡九分裤拉就是东风路卡绝地反击奥德赛副科级拗口的九分裤垃圾是打发绝地反击阿多少经费埃里克杀第四经发局收款方<br>kadjfieuejcknfmcnvmvvnvnvkvakldjfadf</p>

在这里插入图片描述

4.div 大盒子标签
5.span 小盒子标签
 <p><span style="color: blue;">asdkk</span>jdkfjdkfjadlkjfadfj假大空拉家带口熬</p>

在这里插入图片描述

6.img 图片标签

img 按tab

<img src="" alt="">

src：图片地址
alt：图片未加载成功时，替换文字

 <img src="sss" alt="加载失败">

在这里插入图片描述

还可以在里面加title属性，表示tips

 <img src="sss.jpg" title="哈哈哈">
5.a标签 超链接
    <a href="http://www.baidu.com">百度网</a>
图片超链接
<a href="http://www.baidu.com">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594895074270&di=a4524cea84109133b4f6cad93e8d08dd&imgtype=0&src=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F35%2F18%2FHEpPQFKlrj.jpg" alt="">
</a>

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

在这里插入图片描述

刷新
 <input type="text">
    <a href="">刷新</a>

在这里插入图片描述

回到顶部
<p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>

    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>
    <p>大沙发房间奥斯卡</p>

    <a href="#">回到顶部</a>

在这里插入图片描述

禁止跳转
<a href="javascript:void(0);">回到顶部</a>
锚点跳转
  <h1 id="m1">第一章</h1>
    <img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00409-3178.jpg" alt="" width="100%">
    <h1 id="m2">第二章</h1>
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3058120909,2965056694&fm=26&gp=0.jpg" alt="" width="100%">
    <h1 id="m3">第三章</h1>
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3627683307,3801520827&fm=26&gp=0.jpg" alt="" width="100%">
    <h1 id="m4">第四章</h1>
    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2508606513,476405013&fm=26&gp=0.jpg" alt="" width="100%">
    
    <a href="#m1">跳到第1章</a>
    <a href="#m2">跳到第2章</a>
    <a href="#m3">跳到第3章</a>
    <a href="#m4">跳到第4章</a>

在这里插入图片描述

6.格式化标签

在这里插入图片描述

7.pre 预格式化标签
 <pre>
        00     00
            oo
            ~~~
   </pre>

在这里插入图片描述

8.table标签 表格
table相关属性
属性名功能
align对齐方式：left，right，center
width/height宽高
cellpadding内容到单元边框的距离
cellspacing单元格到单元格的距离
border边框 border=“1” border=""
colspan跨列
rowspan跨行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table</title>
    <style>
        table{
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1" align="center" width="600" height="200" cellpadding="10" cellspacing="0">
        <caption>成绩单</caption>
        <thead><!--表头-->
            <tr>
                <th colspan="4">高三三班</th>
            </tr>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
            </tr>          
        </thead>

        <tbody><!--表body-->
            <tr>
                <td rowspan="2">张三</td>
                <td>50</td>
                <td>45</td>
            </tr>
            <tr>
                <td>60</td>
                <td>75</td>
            </tr>
            <tr>
                <td>棉小星</td>
                <td>96</td>
                <td>97</td>
            </tr>
        </tbody>

        <tfoot><!--表尾-->
            <tr>
                <td colspan="4">多次成绩表示补考</td>
            </tr>

        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table练习</title>
    <style>
        table{
            text-align: center;
            background: #E8FAFE;

            
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="5">
        <caption>课程表</caption>
        <thead>
            <tr>
                <th colspan="2" width="200">时间\日期</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
            </tr>
        </thead>
        <tbody>
           
            <tr>
                <td rowspan="2" width="60">上午</td>
                <td>9:30-10:15</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>10:25-11:10</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
            <tr>
                <td colspan="7"></td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>14:30-15:15</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>15:25-16:10</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>

        </tbody>
    </table>
    
</body>
</html>

后续再补充css
在这里插入图片描述

9.三大列表
有序、无序、自定义
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三大列表</title>
</head>
<body>
    <ol>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>       
    </ol>

    <ul>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>       
    </ul>

    <dl>
        <dt>菜单</dt>
        <dd><a href="">小葱拌豆腐</a></dd>          
        <dd>番茄炒蛋</dd>
        <dd>宫保鸡丁</dd>
    </dl>
    
</body>
</html>

在这里插入图片描述

10.表单元素

表单的组成：表单域、表单元素、提示信息
type
在这里插入图片描述
input的属性
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
</head>

<body>
    <div>

        <h1>欢迎注册</h1>
        <p>已有账号？</p>
        <a href="javascript:;">登录</a>

        <form action="" method="GET"> 

            <ul>
                <li>
                    <span>用户名</span>
                    <input type="text" placeholder="请设置用户名" name="userName">
                </li>
                <li>
                    <span>手机号</span>
                    <input type="tel" placeholder="可用于登录和找回密码" name="phone">
                </li>
                <li>
                    <span>密码</span>
                    <input type="password" placeholder="请设置登录密码" name="password">
                </li>
                <li>
                    <span>验证码</span>
                    <input type="text" placeholder="请输入验证码" name="checkNum">
                    <button>获取验证码</button><br>
                </li>

            </ul>



            <button>注册</button><br>
            <div>
                <input type="checkbox" name="read" id="shengming"><label for="shengming">阅读并接受<a href="">百度用户协议</a>及<a
                        href="">百度隐私权保护声明</a></label>
            </div>

            <input type="submit" value="提交">

        </form>


    </div>



</body>

</html>
11.字符实体

HTML中不能使用> < ，浏览器会把它们误认为标签
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
查询：
https://www.w3school.com.cn/html/html_entities.asp

amethystlmy9
关注
专栏目录
bootstrapTable动态渲染数据获取
JSF的博客
06-14 2万+
在其动态渲染表格之前获取有后台传递的数据时，可采用如下代码：
html+css基础知识总结
06-07
能快速准确的看出html+css基础标签和样式的作用
小白Vue学习笔记之基础篇
weixin_45406288的博客
08-19 363
没有什么能够阻挡，我对自由的向往。想做一个简单kuai乐的码农。 本文是根据b站up主黑马程序员的【4小时带你学习Vue】，有兴趣的小伙伴可以移步学习。 参考链接：https://www.bilibili.com/video/BV12J411m7MG?p=5&t=39 1.Vue el 挂载点 代码为： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> .
组件component
weixin_30394251的博客
06-20 84
<!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
Vue组件（Component）
最新发布
leva的博客
02-08 1万+
在正式介绍组件前，先看一个Vue组件的简单示例感受一下，代码如下：组件是可复用的Vue实例，且带有一个名字，在这个示例中组件名字是button-counter。可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义标签来使用，代码如下：Web的组件其实就是页面组成的一部分，好比是计算机中的每一个硬件（如硬盘、键盘、鼠标等），它具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，从而变成一个完整的应用。
HTML+CSS基础知识点.pdf
06-17
HTML+CSS 基础知识点总结 HTML+CSS 是前端开发的基础技术，掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结： 1. HTML 是网页内容的载体，内容就是网页制作者放在页面上想要让...
html&css入门基础知识点.pdf
10-04
HTML和CSS基础知识点 HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...
html+css基础知识点整合
05-27
这是我在学习html和css时候整合的知识点，里面还是比较详细，一些容易混淆的知识点也有说明
Component(组件)
04-11 695
1.Component是一个模板的控制类用于处理应用和逻辑页面的视图部分。 2.Component时Angular2应用最基础的建筑砖块。 3.任何一个Component都是NgModule的一部分，为了定义Component成为NgModule的成员之一，我们应该在NgModule的declarations属性中将需要的Component列出。 4.@Component装饰符能接...
vue-demo示例
热门推荐
zpcqdkf的博客
05-31 2万+
Vue-cnodejs - 基于vue重写Cnodejs.org的webappNeteaseCloudWebApp - 高仿网易云音乐的webappvue-zhihu-daily - 知乎日报 with Vuejsvue-wechat - vue.js开发微信app界面vue2-demo - 从零构建vue2 + vue-router + vuex 开发环境eleme - 高仿饿了么app商家详情...
component组件
陈广晗
04-28 838
组件的三大必备元素 @component（）装饰器： 告知anguler框架如何处理一个tipsctiop类，包含多个属性，这些属性的值叫做元数据。anguler会根据元数据的值来渲染组件并执行组件的逻辑 @template模板： 通过组件自带的模板来定义组件的外观，模板以HTML的形式存在，告诉anguler来如何渲染组件，一般来说模板很想HTML，但是我们可以在模板中使用anguler...
Vue.js基础-09-组件（Component）
运维玄德公
06-06 1468
1. 注册组件 1.1 创建实例时注册 语法示例 完整示例 1.2 在实例外注册组件 语法示例 完整示例 1.3 在变量中定义组件选项 完整示例 2. 接收父组件传来属性（Prop） 2.1 基本使用 语法示例 完整示例 2.2 动态绑定 2.3 绑定列表...
9.组件component
qq_45853870的博客
09-27 485
一、 组件component 1. 什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码 组件是自定义元素（对象） 2. 定义组件的方式 全局组件 方式1：先创建组件构造器，然后由组件构造器创建组件 var MyComponent=Vue.extend({ template:'<h3>Hello World</h3>' }); //2.使用Vue.component(标签名,组件构造器)，根据组件
vue-动态组件（component），缓存组件（keep-alive）、异步组件（defineAsyncComponent ）
weixin_68211919的博客
10-16 3001
一、v-if和v-for两个条件使用避免多余标签 二、动态组件（component）（is为属性，is为变量的情况） 三、缓存组件（keep-alive）（与动态组件结合使用，生命周期函数、选择性缓存组件和选择性不缓存组件，缓存多个组件） 四、异步组件（defineAsyncComponent ）（懒加载组件和预渲染组件）
内置组件：component
过客如期的博客
02-22 897
1.是一个用于渲染动态组件或元素的“元组件”。
component组件基础
m0_66827203的博客
06-30 209
笔记
组件 - Component
Ryker的博客
12-23 354
新建项目默认生成的文件夹 Assets里面存放的是项目所需要的所有的资源 Libray里面存放的是所需要的库文件 ProjectSettings里面存放的是工程设置文件 Temp里面存放的临时文件 一个工程里面有多个场景，一个场景中有多个游戏对象，每个游戏对象又有多个游戏组件Inspector视图下： 1. Mesh Filter 网格过滤器，用来是否显示物体的网格 2. Transform组件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值