HTML&CSS基础

最新推荐文章于 2024-04-20 01:04:17 发布
最新推荐文章于 2024-04-20 01:04:17 发布
阅读量112 收藏 1
点赞数
分类专栏： summary 文章标签： HTML&CSS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43320709/article/details/103412041
版权

HTML

文章目录

<!DOCTYPE html>

# 常用标签
<html lang='test'>
    <head>
        <meta charset='utf-8'>
        <title> 头部一般不用来显示 </title>

    </head>
    <body>
        <h1>标题块级标签，一级标题</h1>
        <h6> 1 ~ 6，一共六级标题 </h6>

        <p> p标签为段落，块级标签<br>
            多个spaces，只能显示一个，如果显示多个请使用  &nbsp&nbsp <br>
            换行符为br标签<br>
            可以自动换行，当一行放不下内容，自动换行
        </p>

        <h2>无序列表和有序列表</h2>
        <ul>
            <li>左边留白无序列表</li>
            <li>左边留白无序列表</li>
            <li>test over</li>
        </ul>
        <ol>
            <li>左边留白有序列表</li>
            <li>左边留白有序列表</li>
            <li>test over</li>
        </ol>
        <l>
            <li>左边不留白无序列表</li>
        </l><br>

        <a href="http://www.baidu.com" target="_blank">
        anchor锚，定位所有资源的定位符，内联链接标签;<br>
        第一种情况：href指定域名，html链接地址为该域名，页外的链接也称外链
        </a><br>

        <a href='#test' target='_blank' >
            第二种情况：href定义页内的锚点,链接地址为url + href(#test);
            作用，定位页内指定的锚点，业内跳转
        </a><br>

        <a href='test' target='_blank' >
            第三种情况：href='test',链接地址为当前URL资源路径的父路径 + href('test')
        </a><br>

        <a href='/test' target='_blank'>
            第四种情况：href='/test' 或者 href='\test'(用的少),链接地址为当前URL资源路径的根路径 + href('test')
        </a><br>
        <br>
        <a href='http://www.baidu.com' target='_self' onclick="window.alert('anchor')">
            target属性，_blank指新窗口打开链接；_self指在当前页面打开链接，缺省_self;<br>
            onclick是点击事件，称为事件回调函数，也称事件响应函数        
        </a><br>
        <br>

        <div id='unique' class='class' >
            图层内联标签；id，非常重要，标签的唯一标识；<br>
            class属性，非常重要，样式表定位并附加样式。前端编程、爬虫中非常有用
        </div>
        <br>
        <img src="test",alt='图片标签'>
        <p>注意：图片会发起一个HTTP GET请求；alt，当图片不能正常显示时，看到该属性的文本信息</p>

        <br>
        <table border="1" style="border-collapse:collapse;">
            <tr>
                <td>table表格标签</td>
                <td>th表格标题，很少使用</td>
                <td>2行3列</td>
            </tr>
            <tr>
                <td>tr定义表格的行</td>
                <td>td定义表格的列</td>
                <td>2行3列</td>
            </tr>
        </table>

        <form action="" method="POST" enctype="application/x-www-form-urlencoded">
            <table border="2" style='border-collapse: collapse;'>
                <tr>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" placeholder="用户名"</td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="password" id="password"></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="gender" id="gender" checked value="M">男
                        <input type="radio" name="gender" id="gender" value="F">女
                    </td>
                </tr>
                <tr>
                    <td>爱好</td>
                    <td>
                        <input type="checkbox" name="interset" id="interset" value="music">音乐
                        <input type="checkbox" name="interset" id="interset" value="movie">电影
                        <input type="checkbox" name="interset" id="interset" value="read">读书
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="提交">
                        <input type="reset" value="重置">
                    </td>
                </tr>
            </table>
        </form>

    </body>
</html>

表单测试

<!DOCTYPE html>

<body>
    <form action="D://1Face_To_Face/前端技术/md/前端.md" method="POST" enctype="application/x-www-form-urlencoded">
        用户名<input type="text" palceholder="用户名"><br>
        密码<input type="password" id="password"><br>
        性别<input type="radio" id="gender">男<br>
        <input type="radio" id="gender">女
        <input type="checkbox" id='interset'>音乐<br>
        <input type="hidden" id="hidden">
        <input type="submit" value="提交">
        <input type="reset"  value="重置">
    </form>
</body>

CSS测试

<!DOCTYPE html>

<head>
    <!-- <style>
        p {color:sandybrown}
        #div {color:sienna;width:80%;border-bottom:#f0f0f0 solid 2px;margin:5px;background-color:skyblue}
        .out-of-order {color:slateblue;border-bottom:springgreen solid 3px;background-color:steelblue;width:50%;margin-left:30px}
        ul li {color:teal;background:violet;border-bottom:#f0f0f0 solid 3px;}
        /* ol > li {color:bisque;margin-left:50px;font-size:70px;}
        li + li {color:brown;font-size:50px;margin-left:50px;background-color:#f0f0f0} */
        ul li,li+li,p,form {color:chocolate;width=50%;background-color:cornflowerblue}
    </style> -->
    <link rel="stylesheet" href="CSS.css">
</head>

<body>
    <h1>简介</h1>
    <p id="p" name="p" >
        段落，默写测试html
    </p>
    <h2>图层</h2>
    <div id="div" name="div" class='div'>
        图层效果
    </div>
    <h2 class='out-of-order'>无序列表</h2>
    <ul>
        <li>无序</li>
        <li>无序</li>
    </ul>
    <h2>有序列表</h2>
    <ol>
        <li>有序</li>
        <li>有序</li>
    </ol>
    <h2>图片</h2>
    <img src="D://1Face_To_Face/前端技术/JavaScript/" alt="加载失败" >
    <h2>链接</h2>
    <a href="http://www.baidu.com" target="_blank" onclick="onkeypress">百度链接</a>
    <h2>表格</h2>
    <table border='1' style="border-color: saddlebrown;">
        <tr>
            <th>标题一</th>
            <th>标题二</th>
        </tr>
        <tr>
            <td>两行三列</td>
            <td>两行三列</td>
            <td>两行三列</td>
        </tr>
    </table>
    <form action="" method="POST" enctype="application/x-www-form-urlencoded">
        用户名<input type='text' placeholder="用户名" name='user'>
        密码<input type="password" placeholder="请输入密码" name="password" id='password'>
        <input type="radio" name="radio" id="radio" value="M">男
        <input type="radio" name="radio" id="radio" checked value="F">女
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
        <input type="hidden" value="hidden">
    </form>
</body>

CSS外联

p {color:sandybrown}
#div {color:sienna;width:80%;border-bottom:#f0f0f0 solid 2px;margin:5px;background-color:skyblue}
.out-of-order {color:slateblue;border-bottom:springgreen solid 3px;background-color:steelblue;width:50%;margin-left:30px}
ul li {color:teal;background:violet;border-bottom:#f0f0f0 solid 3px;}
/* ol > li {color:bisque;margin-left:50px;font-size:70px;}
li + li {color:brown;font-size:50px;margin-left:50px;background-color:#f0f0f0} */
ul li,li+li,p,form {color:chocolate;width=50%;background-color:cornflowerblue}
li {color:bisque;margin-left:50px;font-size:70px;}
li + li {color:brown;font-size:50px;margin-left:50px;background-color:#f0f0f0} */
ul li,li+li,p,form {color:chocolate;width=50%;background-color:cornflowerblue}
able十七
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML&CSS详解
yueseck的博客
03-11 3520
目录 一、web概念概述 1.javaweb 2.软件架构 3.B/S架构详解 二、HTML详解 1.概念 2.快速入门 3.标签学习 4.图片标签 5.列表标签 6.链接标签 7.语义化标签 8.表格标签 9.表单标签 10.表单项标签 三、CSS 1.概念 2.好处 3.css与html的结合方式 4.css语法 5.选择器(筛选具有相似特征的元素) 6.属性 一、web概念概述 1.javaweb 使用Java语言开发基于互联网的项目 .
HTML&amp;CSS基础.xmind
06-16
关于HTML&amp;CSS的xmind脑图；具体涵盖了所有关于HTML&amp;CSS基础的知识点，帮你建立该两门基础课程的知识框架，有助于你的入门速度
前端入门第1章HTML&CSS基础
weixin_51753727的博客
01-30 1042
前端学习
div&css基础知识
大飞的博客
04-30 1266
div与span div、span标签它们仅仅是用来封装数据,而不做任何的样式效果的设置 什么是div div就是html一个普通标签,进行区域划分。特性:独自占一行,独自不能实现复杂的效果。需要结合css样式进行渲染。 div通常是块级元素 什么是span 也是一个html普通标签,特性:共处一行。用来对行内元素进行美化 css样式 css使用的基本语法: &amp;lt;标签名 ...
使用 HTML & CSS 编辑静态网页
weixin_60808029的博客
03-14 5993
文章目录一、HTML 概念概述二、HTML 语法使用说明三、CSS 概念概述四、CSS 中的选择器和属性 一、HTML 概念概述 HTML 是最基础的网页开发语言。是 Hyper Text Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。 超文本 是指用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。 标记语言 是指由标签构成的语言。语法格式：<标签名称>。标记语言不是编程语言，是没有任何逻辑性的。 html文档后缀名 .html 或者.
HTML5&CSS3新特性
weixin_52972575的博客
05-05 8133
一.HTML5新特性 HTML5新特性针对于以前的不足，增加了一些新的标签，新的表单，新的表单属性等。 1.新增语义化标签 新增的带有语义化的标签 二.CSS3新特性
CSS基础（超详解）
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
HTML&CSS精华知识点——基础标签
qq_39052393的博客
09-10 1682
HTML&amp;CSS精华知识点——第二节HTML&amp;CSS精华知识点——第二节HTML基础标签 HTML&amp;CSS精华知识点——第二节 HTML基础标签 1、<html lang="en" ></html>:属于根标签，一个HTML文档里只能有一个根标签，其他的标签所有标签都必须在HTMl里边其中； （lang = “en”:告诉网络爬虫，我们的网站是关于...
揭秘VSCode魔法工具箱：HTML5 & CSS3 超强插件集合 + Css Reset与Normalize.css的终极对决
最新发布
小z的博客
04-20 2352
23(24)(25)-1(2)- HTML、CSS 常用的vscode插件 +Css reset 和Normalize.css
HTML&CSS form表单 注册页面
qq_43113232的博客
09-11 4875
1、HTML的表单标签 form表单 CSS样式 HTML标签：表单标签 1、form表单的基础介绍 A.格式 &amp;lt;form action="http://www.baidu.com" method="get"&amp;gt; ... &amp;lt;/form&amp;gt; B.属性 a. action存放的是URL 网址.（把表单项"输入框"当中的数据,提...
笔记33-HTML&CSS
热门推荐
terence的博客
06-30 7万+
今日内容： 1. HTML标签：表单标签 2. CSS： HTML标签：表单标签 * 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提交方式 * 分类：一共7种，2种比较常用 * get：
HTML-CSS:HTML＆CSS基础
03-20
HTML-CSS:HTML＆CSS基础
html&amp;css入门资料
04-27
CSS作为层叠样式表，是在HTML的基础上发展起来的，旨在分离内容与表现，使得网页设计更为灵活和模块化。CSS通过选择器和规则定义，可以指定HTML元素的样式，实现精确的布局控制。它可以应用于整个网站，确保页面样式...
学成在线静态网页html&amp;css
04-02
在本课程“学成在线静态网页html&amp;css”中，我们将会深入学习HTML（超文本标记语言）和CSS（层叠样式表）这两门核心技术，它们是构建互联网上每一个页面的基础。通过黑马程序员pink老师的指导，我们将一步步掌握如何...
HTML&amp;CSS.zip
04-13
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页和网页设计的基础技术。HTML负责定义网页的内容结构，而CSS则用于控制网页的样式和布局。本压缩包"HTML&amp;CSS.zip"包含了关于这两门技术...
JS解构及数组对象操作
qq_43320709的博客
12-05 836
解构及数组对象操作
DBMS_关系模型
qq_43320709的博客
12-05 543
DBMS_关系模型
JS基础语法
qq_43320709的博客
12-05 457
JS基础语法
OSI参考模型
qq_43320709的博客
12-06 334
OSI参考模型
HTML&amp;CSS入门指南：构建网站设计基础
"HTML&amp;CSS Design and Build Websites" 是一本由 Jon Duckett 所著的书籍，专注于教授前端开发的基础知识，特别是HTML和CSS。这本书以其详尽的解释和清晰的视觉设计，为初学者提供了学习网页设计的良好起点。 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值