HTML +CSS 总结

Palpitate .

于 2023-07-15 11:17:36 发布

阅读量218

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_65740370/article/details/131730501

版权

本文详细介绍了HTML的基础内容，包括HTML的定义、使用开发工具HbuilderX创建页面结构、各种标签的使用，如文本、超链接、图像、表格等。此外，还涉及到了CSS的基础属性，如框架集、视频元素、CSS的使用方式、选择器、字体样式和文本样式等，以及盒子模型和浮动的概念。是一篇适合初学者的HTML与CSS入门教程。

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

html基础内容

1.1前端三剑客之一HTML（超文本标记语言）

1.2 什么是HTML

1.3使用开发工具HbuilderX创建web项目的页面标准结构

html基础内容

1.1前端三剑客之一HTML（超文本标记语言）

        常用的文本标签
        图像标签
        超链接
        表格标签
        表单标签

1.2 什么是HTML

Hyper Text Markup Language超文本标记语言,体现可以对文本进行标记(颜色/字体大小),并且对动画,图片进行渲染等等!

1.3使用开发工具HbuilderX创建web项目的页面标准结构

<!DOCTYPE html> html5的文档类型
<html> html的标准的开始标签
   <head> 头标签
       <meta charset="utf-8" /> 页面编码utf-8(一个中文对应三个字节)
       <title></title>       页面的窗口标题
   </head>
   <body>   页面主体部分,需要写大量的html元素(标签)在这里面通过浏览器进行渲染

   </body>
</html>

1.4 html的标签

1.4.1一些常见的文本标签

      标题标签 h1-h6：从大到小 h7自动加粗
      分割线标签 hr：没有开始标签
      段落标签 p 特点：这一段内容的前后都会带换行效果、
      段落缩进标签：blockquote
      滚动标签常用属性：
scrollamount：设置滚动速度：正整数的值（值越大速度越快）
            behavior：滚动方式
            scroll:穿梭滚动
            slide: 滚动到某边框停止
            alternate：交替滚动
direction:滚动方向
            left 默认为从右到左
            right 从左到右
            up 向上滚动
            down 向下滚动
bgcolor 背景颜色

      格式化标签加粗标签/斜体标签
            加粗标签：storg和b都是同样的效果，前者是一种文章预期强调
            斜体标签：i和em效果相同，i是普通斜体，em是语气强调

      编程代码code标签
     上下标标签 sup 和 sub

转义字符：
                    © 等价于©
                    ® 等价于®
                      等价于一个空格
                    &ensp; 等价于两个空格

1.4.2 超链接标签

超链接
               a标签
                   属性
                   href：链接到的资源地址url（统一资源定位符）
                       url统一资源定位符的组成：

                       协议+域名+端口：网站默认都是将端口80省略不写
                       http://www.baidu.com
                       面试题：统一资源定位符url的执行流程

                       协议:
                           file:// 本地文件协议
                           http:// http协议
                           https:// 适合发送隐私数据
                           jdbc:mysql:// (jdbc的mysql协议)
                           thunder://迅雷协议
                           mailto: 邮件协议
                           ...
                       target：打开资源文件的方式
                               _blank:新建一个窗口打开
                               _self:（默认值），当前窗口直接打开

1.4.3 图像标签

img标签

               src属性：链接到图片资源地址（相对路径）
               相对路径注意事项：页面储存位置是否在同级目录下

               title：图像的标题文字提示
               设置宽和高：
               width和height 单位为px或者是权重百分比%
               alt：替代文本（当图片链接失效时）
               align；左右浮动，left（左对齐） right（右对齐）