H5和css学习总结

dedsec0x

已于 2022-07-26 16:34:29 修改

阅读量519

点赞数

CC 4.0 BY-SA版权

文章标签： css 学习前端

于 2022-07-26 14:42:38 首次发布

本文链接：https://blog.youkuaiyun.com/dedsec0x/article/details/125993438

本文是关于H5和CSS的学习总结，涵盖了H5的基本结构、标签、表单元素以及CSS的选择器优先级和盒模型。H5强调语义化标签，如标题、段落、文本格式和表格等。CSS部分讲解了选择器优先级和如何实现元素的居中布局，包括内部元素和不定高div的居中方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5总结

Web标准构成

结构(html)，表现(css)，行为(js)

HTML骨架格式

基本骨架格式:

<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

头标签<head>用于存放，定义元数据，元数据不被用户可见。

定义元数据<meta>标签定义元数据的信息。

对于ie8的独有标注:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

移动端页面比例:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

什么是标签

w3c提前制定好的一系列针对于html文档的标准
标签一般成对出现，有个别标签只有开始标签，称为单标签
标签允许嵌套
通常称标签为元素
标签属性是对标签额外属性的描述
属性格式一般为key="value"
一个标签可以拥有多个属性,多个属性之间通过空格分隔
语义化标签：对应标签做对应的事，不被样式所影响

标题

一级标题标签<h1>

二级标题标签<h2>

以此类推到六级标签

    <h1>h1 一级标题</h1>
    <h2>h2 二级标题 以此类推到h6</h2>

段落

段落标签paragraph<p>

<p>实例：1、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。</p>
    <p> 2、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。</p>
    <p>3、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。 </p>
    <p>4、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于 promise、async 等内容要尤其关注。 
    </p>
    <p>5、HTML5和CSS3。要熟悉其中的新特性。</p>
    <p>6、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。</p>
    <p>7、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。</p>

换行标签用于换行

文本格式以及字体

字体加粗<strong>或者<b>

删除线<del>

倾斜字体<em>或者<i>

下划线<ins>或者<u>

分块标签<div>还有<span>

图像标签<img>标签中的src表示图片路径

标签<a>表示超链接,anchor表示超链接的锚点，以id作为标识target属性中的self表示此页面，blank表示新窗口打开href为‘#’时表示空页面

水平线<hr>

下标<sub>

上标<sup>

表格标签

表格标签<table>

单元格标签<td>

行标签<tr>

表头标签，字体加粗<th>

表格头部区域，不同于th<thead>

表格主体区域<tbody>

跨行合并rowspan="合并单元格个数"

跨列合并colspan="合并列个数"

列表标签

无序列表<ul>

有序列表<ol>

列表项用<li>

标签<ul>中只能放<li>标签,<li>中可以放其他标签

自定义列表<dl>

标签<dt>

列表项<dd>

表单标签

表单域<form>

可以把元素提交到服务器action="url地址";method="提交方式";name="表单名称"

表单元素

输入框<input>

输入框常用属性type=“text”,maxlenth=""表示最大输入的长度,value=""表示打开页面显示的文字

密码框属性type="password" name="password"

单选按钮的不同input的name相同才可多选一checked属性，默认打开页面选中此选项单选框type="radio" name="sex" checked="checked"

下拉框<select>

下拉框选项<option>

提交按钮<input type="submit" value="value修改按钮的内容">

重置按钮 <input type="reset" value="用value修改内容">

普通按钮<input type="button" value="普通按钮">

文件上传 <input type="file">

label标签，和表单用id绑定 <label for="form的id">

文本域标签<textareacols="列数" rows="行数">

CSS总结

难点

选择器优先级：

!important> 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

盒模型：

盒居中::position:absolute; top:0;bottom:0;left:0;right:0;margin:auto;height:100px;width:100px(注要设置宽高的)
或 width:200px;height:200px;position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px
内部元素居中：text-align：center line-height:height
不定高div居中（能不使用position尽量不使用）
1、display: flex; justify-content: center;align-items: center（justify-content/align-items也可以设置成左对齐右对齐）
2、父盒子设置:display:relative
Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;
3、父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
Div 设置: display:inline-block;vertical-align:middle;
块状元素居中（块状元素没发用text-align）
1.宽度一定：margin:auto
2.宽度不定：块级变行内，然后在父上text-aligin

图片的块级元素居中直接margin：0 auto 上下0左右auto

盒阴影box-shadow：10px 10px 10px 10px black inset //最后一个px能控制阴影大小 inset使内阴

resize:both/horizontal/vertical //允许某个元素在都/水平/垂直/方向拖动（配合overflow:auto）
overflow:auto
一个元素里面没有元素然后添加padding就是把该元素当成内部元素
box-sizing:border-box 盒子的宽高就是他的本身宽高，这个时候的padding不会影响
float:left/right(从左至右浮动/从右至左浮动) 这个时候设置盒子内部的属性（border、padding等）是需要设置border-box的