HTML与CSS基础

news2024/11/13 12:14:17

2022.12.12

  • 程序员在前端写完代码之后通过浏览器的渲染和解析成为用户看到的网页

  • 浏览器出品的公司不同,内部的渲染引擎也不同。导致解析相同代码时的速度、性能、效果也不同

  • 相同的前端网页在不同浏览器中运行的的结果也可能不同

  • WEB的三大标准

    • HTML包含页面内容(骨架)

    • CSS负责页面的表现

    • JavaScript负责页面与用户的交互效果

HTML(超文本标记语言)

html标签参考手 册:HTML 标签参考手册

<strong>效果:加粗</strong>

HTML的固定结构

<html>
    <head>
        <title></title>
    </head>
    
    <body>
    </body>
</html>
<img>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--图片和html页面源码在一个文件夹内 两文件为同级文件-->
    <!--  ./  表示当前路径    ../表示上级别目录  -->
    <!-- 图片的宽和高标记一个就行 另一个会等比例缩放-->
    <!-- title 属性 悬停的时候会显示里面的文本-->
    <img src="./图片.jpg" alt="没有显示出来" title="快划走" width="300">
</body>
</html>


绝对路径 通常从盘符开始的路径/完整的网络路径

相对路径 :从当前文件开始找目标文件





音频标签
<audio src="" controls autoplay loop></audio>


视频标签
<video src="" controls autoplay muted loop></video>
<!-- muted 静音自动播放-->




超文本标签

<a href="./test2.html">超链接</a>
<a href="https://www.baidu.com">超链接</a>
<!-- 不知道写什么 href中写#号 -->


无序列表
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <!--ul标签中只允许添加li标签-->
</body>


有序列表
<body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>


自定义列表
<body>
    <dl>
        <dt>数字</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
    </dl>
</body>

表格

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
    <table border="1px" width="500px" height="400px" >
        <caption><b>表格标题</b></caption>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>
</html>

合并单元格遵守左上原则

  • 左右合并保留最左的 
  • 上下合并保留最上面的

 

<body>
    <table border="1px">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </table>
</body>

表单标签(登录、注册、搜索的时候用)

 input系列标签、input标签根据type属性值不同,显示不同的效果。

input系列标签常用属性

 用在type属性值为file时

 

 button也可以作为标签出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的使用</title>
</head>
<body>

    <form>
        文本框: <input type="text" placeholder="提示文字"><br><br>

        密码框: <input type="password" placeholder="提示文字"><br><br>

        单选框:<input type="radio" name="性别" checked>男性 <input type="radio" name="性别">女性 <br><br>

        多选框:<input type="checkbox"><br><br>

        文件:<input type="file" name="" id="" multiple><br><br>

        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
        <input type="button" value="默认按钮"><br><br>

        <button type="submit">button提交按钮</button>
        <button type="reset">button重置按钮</button>
        <button>button普通按钮</button><br><br>

        
    </form>
</body>
</html>

效果:

select下拉菜单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select下拉菜单</title>
</head>
<body>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option selected>广州</option>
        <!-- selected 默认选中 -->
    </select>
</body>
</html>

label标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>
    性别:
    <label><input type="radio" name="sex">女</label>
    <label><input type="radio" name="sex">男</label>
</body>
</html>

点击文本也可以选中单选框

语义化标签

有语义的布局标签:做手机端前端用的

 字符实体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>
    <p>空格&nbsp&nbsp空格</p>

</body>
</html>

 CSS(层叠样式表 原则:后面的样式覆盖前面的样式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        p{
            color: deeppink;
            font-size: 40px;
            background-color: brown;
            height: 500px;
            width: 500px;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="./my.css">
<!--    rel="stylesheet" 表示引入的文件为内联样式表-->
</head>
<body>
    <p>这是一个p标签</p>
    <p style="color: brown">这是一个p标签</p>
</body>
</html>

基础选择器

  •  标签选择器
  • 类选择器
  • id选择器(通常配合JS使用)
  • 通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
   <style>
       .red{
           color: brown;
       }

       .size{
           font-size: 40px;
       }
       /*这是类选择器*/
   </style>
</head>
<body>
    <p class="red size">这是p标签</p>
<!--    一个标签可以使用多个类选择器-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
   <style>
       #coral{
           color: coral;
       }
       /*这是id选择器*/
   </style>
</head>
<body>
    <p id="coral">这是p标签</p>
<!--    id选择器一个页面只能用一次,虽然多次用也不会报错,但为了后面配合JS,一个页面内不要用多次id选择器-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
   <style>
       *{
           margin: 0px;
           padding: 0px;
       }
       /*通配符选择器在开发中通常为了选择所有标签 以便于清除标签的默认内外边距来使用*/
   </style>
</head>
<body>
</body>
</html>

字体和文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
   <style>
       p{
           font-size: 30px;
           /*控制字体大小*/

           font-weight: 700;
           /*控制字体粗细*/

           font-style: italic;
           /*控制文字是否倾斜*/

           font-family: sans-serif;
           /*控制文本的字体 windows电脑默认字体是微软雅黑  网页中字体一定是非衬线字体sans-serif*/
       }
   </style>
</head>
<body>
    <p>p标签</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本缩进</title>
   <style>
       *{
           margin: 0px;
           padding: 0px;
       }
       p{
           text-indent: 2em;
           /*文本缩进2个字的大小*/
       }
   </style>
</head>
<body>
    <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标签p标签p标签p标签p标签p标签p标签</p>
</body>
</html>

 

文本水平对齐方式text-align

 文本修饰

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
   <style>
       *{
           margin: 0px;
           padding: 0px;
       }
   </style>
</head>
<body>
    <p style = "text-decoration: underline">这是p标签</p>
    <p style = "text-decoration: line-through">这是p标签</p>
    <p style = "text-decoration: overline">这是p标签</p>
    <a href="#">有下划线的超链接标签</a><br>
    <a style = "text-decoration: none" href="#">这是超链接标签,没有下划线</a>
<!--    用这个属性去除下划线-->
</body>
</html>

行高

     字体的复合属性 font:style(可省略)、weight(粗细 可省略)、size/line-height(字号/行高)、family(字体)

颜色表示方式

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/99614.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java+MySQL基于SSM的智能办公管理系统

随着时代的发展,人们越来越来希望通过简单方便快捷的方式来进行办公,通过自能办公系统可以实现在线办公,这种办公模式脱离了传统纸质办公很多困扰,在实现现代化的同时提高了办公的效率。 本智能办公管理系统采用JAVA语言来进行开发,用小巧灵活的MySQL数据库做完后台存储解释。本…

痞子衡职场经验与感悟分享 - 索引

大家好&#xff0c;我是痞子衡&#xff0c;是正经搞技术的痞子。本系列痞子衡给大家分享的是职场经验与见闻感悟。 痞子衡在嵌入式行业也摸打滚爬了不少年&#xff0c;有一些个人经验可以给大家参考。所谓他山之石可以攻玉&#xff0c;希望痞子衡的经验对大家的职场之路有所帮…

jsp+ssm计算机毕业设计电影影评网【附源码】

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; JSPSSM mybatis Maven等等组成&#xff0c;B/S模式 Mave…

java基础的综合运用

文章目录前言一.类的设计书籍类书架类用户类二.行为的规范2.1 增加书籍2.2展示所有书籍2.3查找书籍2.4 删除书籍2.5 归还书籍2.6 借阅书籍2.7 退出系统三.测试类的方法四.项目的目录前言 在我们学习完面向对象的知识之后&#xff0c;我们就要运用相关知识去实现一个图书管理系…

十六进制转Ascii脚本(包含\x处理)

目录 1.前言 2.十六进制转换脚本(包含处理\x) 1.前言 在以前玩CTF的时候,会遇到十六进制编码,特别是带\x的那种,网上虽然也有在线解密网站,但是对于\x解码不是特别友好。 2.十六进制转换脚本(包含处理\x&#

【Flink实时数仓】数据仓库项目实战 《四》日志数据分流 【DWD】

文章目录【Flink实时数仓】数据仓库项目实战 《四》日志数据分流-流量域 【DWD】1.流量域未经加工的事务事实表1.1主要任务1.1.1数据清洗&#xff08;ETL&#xff09;1.1.2新老访客状态标记修复1.1.3新老访客状态标记修复1.2图解1.3代码1.4数据测试1.4.1 测试脏数据1.4.2 测试e…

论文写作神器,SCI 写作必备

一、论文写作建议与英文句型积累/引用 1. Academic Phrasebank 网址&#xff1a; https://www.phrasebank.manchester.ac.uk/ Academic Phrasebank&#xff1a;从引言工作到结论提出了论文写作的详细建议&#xff0c;并在每个小点给出了海量的英语表达以供参考。是 SCI 新手…

linux red hat 8.0 搭建DNS服务

DNS简介&#xff1a; 简单的来说&#xff0c;DNS就是把域名和IP地址联系在一起的服务&#xff0c;有了DNS服务器&#xff0c;你就不用输入IP地址来访问一个网站&#xff0c;可以通过输入网址访问。 可以把DNS服务理解成网易有道词典&#xff0c;你去搜索一个英语单词&#xff0…

【MindStudio训练营第一期】【昇腾AI训练营新手班学习笔记】大作业

介绍 大作业&#xff1a;使用MindStudio成功复现昇腾社区中的MindX SDK应用案例 选题&#xff1a;黑白图像上色 https://www.hiascend.com/zh/developer/mindx-sdk/case-studies/d0c56d6f-a6f9-4b77-8587-db8272f22f3b 步骤 运行 使用MindStudio打开下载到的工程文件 创建d…

jsp+ssm计算机毕业设计大学新生军训管理系统【附源码】

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; JSPSSM mybatis Maven等等组成&#xff0c;B/S模式 Mave…

笔试强训(四十八)

目录一、选择题二、编程题2.1 左右最值最大差2.1.1 题目2.1.2 题解一、选择题 &#xff08;1&#xff09;常见的http错误描述原因错误的是&#xff08;D&#xff09; A.404-Not found B.302-临时重定向 C.500-内部服务错误 D.403-IP address rejected 403 Forbidden&#xff1…

Unity Animancer插件(三)运动

一、根运动 Animancer的根运动系统与原生的工作原理完全相同&#xff0c;但我们可以通过继承Transition类型或实现ITransition接口&#xff0c;来将额外的数据与动画绑定&#xff0c;从而更方便地控制根运动。 在下面这个示例中&#xff0c;我们通过自定义的Transition类实现…

jsp+ssm计算机毕业设计订单管理系统【附源码】

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; JSPSSM mybatis Maven等等组成&#xff0c;B/S模式 Mave…

Linux操作系统~信号处理的底层原理

目录 1.信号在内核中的表示 信号处理的方法 2.信号的递达&#xff0c;未决&#xff0c;阻塞 3.信号集操作函数 &#xff08;1&#xff09;.sigset_t&#xff08;信号集类型&#xff09; &#xff08;2&#xff09;.信号集函数 &#xff08;3&#xff09;.sigprocmask函数…

基于asp.net194校园火车票预订系统-计算机毕业设计

项目介绍 asp.net版火车票查询系统主要有用户注册&#xff0c;在线查询&#xff0c;在线订票&#xff0c;后台管理等功能。用户只有先注册才能登录火车票查询系统的首界面&#xff0c;然后可以进行在线查询、车票订购的功能。可对车次信息的查询和客户对已定车票信息的查询&am…

【云原生进阶之容器】第一章Docker核心技术1.6节——UnionFS

1 UnionFS综述 1.1 什么是 UnionFS 联合文件系统(Union File System),2004年由纽约州立大学开发,它可以把多个目录内容联合挂载到同一个目录下,而目录的物理位置是分开的。UnionFS可以把只读和可读写文件系统合并在一起,具有写时复制功能,允许只读文件系统的修改可以保…

二叉排序树详解及实现

二叉排序树详解及实现1.什么是二叉排序树2.二叉排序树的数据结构2.1二叉排序树的节点类型2.2二叉排序树中插入某个元素2.3 二叉排序树中按值查找元素2.4 找排序二叉树中的最小值2.5返回排序二叉树中ptr中序遍历的后续节点2.6 寻找排序二叉树中的最大值2.7 寻找二叉树中中序遍历…

《痞子衡嵌入式半月刊》 第 68 期

痞子衡嵌入式半月刊: 第 68 期 这里分享嵌入式领域有用有趣的项目/工具以及一些热点新闻,农历年分二十四节气,希望在每个交节之日准时发布一期。 本期刊是开源项目(GitHub: JayHeng/pzh-mcu-bi-weekly),欢迎提交 issue,投稿或推荐你知道的嵌入式那些事儿。 上期回顾 :…

【分布式事务之spring实践】分布式事务选型实战

Spring中使用事务 Spring是一个伟大的框架&#xff0c;从一开始只是一个容器框架&#xff0c;到现在已经发展成为了一个包含企业开发中的方方面面的很多框架的总称。它不但从复杂度上&#xff0c;发展出了用于各个方面的子框架。它还从易用性出发&#xff0c;推出了像Spring-B…

多旅行商问题:世界杯优化算法(World Cup Optimization,WCO)求解多仓库多旅行商问题(提供Matlab代码)

一、世界杯优化算法 世界杯优化算法&#xff08;World Cup Optimization&#xff0c;WCO)由Navid Razmjooy等人于2016年提出&#xff0c;该算法模拟了国际足联世界杯比赛&#xff0c;思路新颖&#xff0c;收敛速度快&#xff0c;全局寻优能力强。 算法原理参考&#xff1a;智…