前端HTML5+CSS3

最新推荐文章于 2022-08-04 23:56:06 发布

qq_38198866

最新推荐文章于 2022-08-04 23:56:06 发布

阅读量123

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_38198866/article/details/120501465

版权

1. 网页的组成
主要由图片，文字，超链接，音频，视频等

前端的代码是通过浏览器解析/渲染成用户看到的界面
3. 常见的五大浏览器
IE浏览器谷歌浏览器欧朋浏览器 Safira浏览器火狐浏览器
4. 渲染引擎（内核）- 专门对代码进行解析和渲染的部分

浏览器	内核
IE浏览器	Trident
火狐浏览器	Gecko
Safira	Webkit
欧朋浏览器/谷歌浏览器	Blink(属于webkit的分支)

备注：由于渲染引擎的不同，导致解析相同代码时的速度，性能，效果也不同

5. web标准
让不同的浏览器按照想听的标准显示结果，让展示效果统一化

6. web标准的构成
结构 HTML
样式 CSS
行为 JavaScript

7. HTML标签

标签名称	代码	常见属性
标题标签	h1-h6	\
段落标签	`<p>前端开发是创建WEB页面或APP等前端界面呈现给用户的过程</p>`	\
换行标签	`<br>`	\
水平线标签	`<hr>`	\
文本格式化标签	`<b>加粗</b><i>倾斜</i><u>下划线</u><s>删除线</s><br><strong>加粗</strong><em>倾斜</em><ins>下划线</ins><del>删除线</del>`	\
图片标签	`<img src = "路径" alt = "替换文本">`	title表示提示文本-鼠标悬停时显示；width/height表示设置图片高度
音频标签	`<audio src = "路径" controls></audio>`	autoplay表示自动播放（部分浏览器不支持);loop表示循环播放【目前只支持三种格式（MP3，mav，agg）】
视频标签	`<video src="material/video.mp4" controls></video>`	autoplay表示自动播放（部分浏览器不支持);loop表示循环播放【目前只支持三种格式（MP4，webM，ogg）】
超链接标签	`<a href="https://www.baidu.com">点击进入百度</a>`	target[_blank表示打开新的网页;_self表示在当前窗口打开]

8. 列表标签

应用场景
新闻列表；排行榜；账单等场景【按照行的方式，整齐显示内容】
无序列表

<ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
    </ul>

有序列表

<ol>
        <li>小姐姐：100分</li>
        <li>小帅哥：80分</li>
        <li>小可爱：60分</li>
    </ol>

自定义列表

<dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
</dl>

9.表格标签

表格的基本标签

标签名称	说明
table	标签整体，可用于包裹多个tr
tr	表格的每行
td	表格的每列

表格的相关属性

属性名称	属性值	效果
tborder	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

表格标题和表头单元格标签

标签名称	说明
caption	表格整体大标题
th	数字

表格的结构标签

标签名称	说明
thead	表格头部
tbody	表格主体
tfoot	表格的底部

合并单元格
跨行合并 rowspan
跨列合并 colspan
注意：只有同一个结构标签才可以进行合并

<table border="1px" width="300px" height="300px">
        <caption>
            <h2>学生成绩单</h2>
        </caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小哥哥</td>
                <td rowspan="2">100分</td>
                <td>小哥哥真帅气</td>
            </tr>
            <tr>
                <td>小姐姐</td>
                <td>小姐姐真漂亮</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">郎才女貌</td>
            </tr>
        </tfoot>
    </table>

10.表单标签

input系列标签（根据属性type的值不同，展示的效果也不同）

标签名称	type属性	说明	属性名
input	text	文本框	placeholder(占位符号，提示用户输入内容的文本)
input	password	密码框	placeholder(占位符号，提示用户输入内容的文本)
input	radio	表单选框	name(一组的名字需要相同);checked(默认选中)
input	checkbox	多选框	checked(默认选中)
input	file	文件选择	multiple(多文件选择)
input	submit	提交	\
input	reset	重置	\
input	button	普通按钮	\

select下拉菜单标签

<select>
            <option>上海</option>
            <option>北京</option>
            <option selected>广州</option> <!-- selected表示默认选中 -->
            <option>深圳</option>
</select>

textarea文本域标签

<textarea cols="30" rows="10"></textarea>

label标签（用于绑定内容与表单标签之间的关系）
使用方法：
使用label包裹内容
在表单签上加上id属性
在label的for属性上设置对应的id属性值
11.css的引入方式
内嵌式
CSS写在style标签中

<!-- 内嵌式 -->
    <style>
        p {
            color: red;
        }
    </style>

外联式
写在单独的css样式表中，通过link标签引入

<link rel="stylesheet" href="css引入方式.css">

p {
    color: red;
}

行内式
css写在style属性中

<body>
    <p style="color: red;">我是一个段落标签</p>
</body>

12.基础选择器

标签选择器（通过标签名称，找到这类标签）
类选择器（class属性，类名可以重复）

<style>
        .red {
            color: red;
        }
    </style>
</head>

<body>
    <p class="red">我是小红</p>
</body>

ID选择器（唯一的）

#green {
            color: green;
        }

通配符选择器

结构：*{属性名：属性值}

13.字体和文本样式

字体样式

字体大小：font-size（谷歌浏览器默认是16px）
字体粗细：font-weight: 700;（正常normal-400；加粗bold-700）
字体样式：font-style: italic;（表示文字倾斜）默认正常normal
常见的字体系列：无衬线字体-sans-serif;衬线字体-serif;等宽字体-monospace
字体系列样式：font-family: ‘楷体’;
连写：style weight size family

文本样式

文本缩进：text-indent: 1em;
文本水平居中：text-align: center;（center表示水平居中； left表示左对齐； right表示右对齐）
文本修饰： text-decoration: underline;（underline下划线;line-through删除线;overline上划线;none无装饰线）

14.选择器进阶

后代选择器(选择父元素后代中满足条件的元素)
选择器1 选择器2{css}
子代选择器(选择父类元素中子代中满足条件的元素)
选择器1 > 选择器2{css}
并集选择器
选择器1，选择器2{css}
交集选择器
选择器1选择器2{css}
15.背景相关属性
背景颜色（background-color: rgba(234, 214, 98, .3);）
背景图片（background-image: url(…/案例/images/balanceCar.jpg);）
背景平铺（background-repeat: repeat-x;）
repeat-x 水平方向平铺 repeat-y 垂直方向平铺 no-repeat 不平铺
背景位置
background-position: 水平方向的位置垂直方向的位置;
背景相关属性连写
background: rgba(234, 214, 98, .3) url(…/案例/images/balanceCar.jpg) no-repeat center center;
16.盒子模型
盒子模型包括四个部分：
内容区域（content）内边距（padding）边框（border）外边距（margin）
16.清除浮动的方法
直接设置父元素高度
额外标签法
在父元素内容的最后添加一个块级元素并设置clear：both
单伪元素清除法
基本写法：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

补充写法：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    /* 补充写法：在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

给父元素设置overflow：hidden

qq_38198866

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端HTML5+CSS3

1. 网页的组成主要由图片，文字，超链接，音频，视频等前端的代码是通过浏览器解析/渲染成用户看到的界面3. 常见的五大浏览器IE浏览器谷歌浏览器欧朋浏览器 Safira浏览器火狐浏览器4. 渲染引擎（内核）- 专门对代码进行解析和渲染的部分浏览器内核IE浏览器Trident火狐浏览器GeckoSafiraWebkit欧朋浏览器/谷歌浏览器Blink(属于webkit的分支)备注：由于渲染引擎的不同，导致解析相同代
复制链接

扫一扫