HTML基础

a52429898

已于 2022-08-09 11:49:09 修改

阅读量174

点赞数

分类专栏： html 文章标签： html5

于 2022-04-23 16:49:39 首次发布

本文链接：https://blog.csdn.net/a52429898/article/details/124364105

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.HTML的基本结构

1.<!DOCTYPE html>代表html结构的文档声明。
2.<html></html>代表整个html的文档

3.<head></head>双标签

4.<meta charset="utf-8">单标签，meta元数据标签，charset="utf-8"国际标签编码结构

5.<title></title>放网页的标题

6.<body></body>放的是网页的主体内容。要渲染在网页的东西

7.快捷键的使用： ctrl+n 新建文件 ctrl+r 运行到浏览器 ctrl+z 撤回 ctrl+/ 注释 ctrl+k 一键整理格式 ctrl+A 全选 ctrl+s 保存 ctrl+t 截屏...

二. 全局属性

样式声明的三种方式
行内样式>内部样式行内样式>外部样式
但是内部和外部谁的等级高，是取决于谁离标签更近一点，就近一致原则

1.标签声明

  行内样式，写在对应的标签里面，用style属性
       <p id="mycolor" style="color: #358782;">我是行内样式声明的文字</p>

       2.id声明,但是id不能写多个，在一个网页里面的id不能重复
写在网页的头部的位置，用<style></style>标签来声明

3.class声明,可以声明多个
写在网页的头部的位置，用<style></style>标签来声明

4.我是外部样式表

三基础表单

action表单默认提交地址

type="text" 单行文本框，鼠标点击获取到焦点，
       自动获取焦点 autofocus name=""就是表单名称
       value要显示的值
       placeholder 默认提示，输入内容提示消失
       autocomplete 设置自动完成的功能，为off没有提示不能自动填充，为on可以自动填充

表单语义化：<input type="checkbox" id="aa">
<label for="aa">足球</label>

for属性的值和 input中 id属性值一致，可以让用户体验更友好，简称表单语义化

四. 动态伪类选择器

a:link{
/* 鼠标未单击访问的时候超链接的样式 */
color:red;
}

a:hover{

/* 鼠标悬停的时候超链接的样式 */
color: yellow;

}

a:active{
/* 鼠标按下那一刻，超链接的样式 */
color: skyblue;

}

a:visited{
/* 鼠标访问过后超链接的样式 */
color: purple;

}

五.em与rem的用法及区别

1. em：em的相对长度单位会随着父级的变化而变化

<div>
           我是div里的内容
           <p>
               我是div里的p标签的内容
               <span>
                   我是div里的p标签的span 的内容
                   <label>
                       我是div里的p标签里的span标签里的label标签
                   </label>
               </span>
           </p>
       </div>

2. rem：rem单位会随着根节点而发生变化

<div>
           我是div里面的内容
           <p>
               我是div里面的p标签的内容
               <span>
                   我是div里面p里面的span 的内容
               </span>
           </p>
       </div>