css入门01

最新推荐文章于 2024-09-11 20:31:47 发布

hongchuna.

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量68

点赞数 4

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_47719765/article/details/130491325

版权

本文介绍了网页的基本组成元素，包括文字、图片、音频和视频等，并详细讲解了HTML的结构，如head、body和title等。此外，还涵盖了HTML语法规范，如注释、标签分类及关系，以及常用标签的用法，如标题、段落、图像、超链接、列表、表格和表单等。同时，提到了CSS的引入方式和基础选择器，以及文本样式和布局相关属性。

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

基础认知

网页组成

文字 图片 音频 视频 超链接等元素组成

web标准

html:结构
css:表现
javaScript:行为

html骨架

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主体,
        以后所有的标签 内容都放到body标签里面.
    </body>
</html>
html:网页的主体
head:网页的头部
title:网页的标题
body:网页的主体

html语法规范

html注释
解释说明的作用,给程序员或者其它同事看.
快捷键:ctrl+/
标签分类
	双边标签
	<p>内容</p>
	单边标签
	<br>
	<hr>
标签关系
    父子关系(嵌套关系)
    兄弟关系(并列关系)

排版标签

标题标签(重点)

	<h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
特点
双边标签
独占一行
文字加粗变大
h1-h6依次递减

段落标签(重点)

<p>一段文字</p>
特点:
双边标签
独占一行
段落直接有间隙 
会根据浏览器窗口大小自动换行显示

换行标签

<br>
单边标签
强制换行

水平线标签

<hr>
单边标签
显示一条分割线

文本格式化标签(重点)

加粗:
<b>加粗</b>
<strong>加粗</strong>
下划线:
<u>下划线</u>
<ins>下划线</ins>
倾斜:
<i>倾斜</i>
<em>倾斜</em>
删除线:
<s>删除线</s>
<del>删除线</del>
重点掌握  strong em
推荐大家在实际开发中使用单词较长的标签,语义更加强烈.

媒体标签

图像标签(重点alt:替换文本/title:提示文本)

<img src="图片地址/图片路径">
属性:
src:图片的路径(必写属性)
alt:替换文本
title:提示文本
width:设置图片宽度
height:设置图片高度
boder:设置边框

文件路径(重点相对路径)

文件路径
绝对路径:以计算机盘符开始.
	<img src="D:\web79\day01\05-素材\baby.jpg" alt="">
 	<!-- 网址路径 一定要以https://或者以http://才可以出来 -->
    <img src="http://www.itheima.com/images/logo.png" alt="">
相对路径:从当前文件开始出发找目标文件的过程,简单的来说相对HTML页面的位置.
同级目录
	方法一:目标文件名称
    方法二:./目标文件名称(推荐使用vscode提示)
<img src="./dog.gif" alt="">   
下级目录
 	方法一: 目标文件夹/目标文件名称
 	方法二:  ./目标文件夹/目标文件名称(vscode提示)
<img src="./img/cat.gif" alt="">
上级目录 
	../
<img src="../baby.jpg" alt="">

音频标签

<audio src="./music.mp3" controls autoplay loop></audio>
常见属性:
   src:音频路径
   controls:显示播放控件
   autoplay:自动播放
   loop:循环播放
  音频标签支持3种格式,推荐使用mp3

视频标签

<video src="./video.mp4" controls autoplay loop muted width="300"></video>
 常见属性:
    src:视频的路径
    controls:显示播放控件
    autoplay:自动播放,但是谷歌需要muted属性才可以实现自动播放
    loop:循环播放
    width:设置宽度
   height:设置高度
视频标签支持3种格式,推荐使用mp4

超链接标签(重点)

<a href="链接的地址">跳转的文本</a>
属性:
href:链接跳转地址,必写属性.
target:设置窗口打开方式
	取值:
	_self:默认值,当前窗口打开页面
	_blank:新的窗口打开,保留原始窗口.
示例代码
<a href="https://www.jd.com/">外部链接</a>
<a href="./02-视频标签.html">内部链接</a>
<a href="链接地址"><img src="图片路径">网页元素链接</a>
下载链接 文件的后缀名必须以.exe .zip .rar等后缀名结尾
<a href="./02.zip">下载链接</a>
<a href="#">空链接</a>

列表应用场景

在网页中展示关联性的内容, 例如:新闻列表. 排行榜网站首页底部导航

三种,无序列表,有序列表,自定义列表

无序列表

应用场景: 新闻列表网页的导航网页的侧边栏

<ul>
    <li>列表的每一项内容</li>
    <li>列表的每一项内容</li>
    <li>列表的每一项内容</li>
    .....
</ul>
无序列表有默认的小圆点后期css处理
ul里面只能包含li标签
li标签里面可以包含任意内容(元素)

有序列表

<ol>
    <li>列表的每一项内容</li>
    <li>列表的每一项内容</li>
    <li>列表的每一项内容</li>
    .....
</ol>
有序列表有默认的序号,后期css处理
ol里面只能包含li标签
li标签里面可以包含任意内容(元素)

自定义列表

应用场景:网页的底部导航(网页尾部)

<dl>
    <dt>列表主题</dt>
    <dd>列表主题的每一项内容</dd> 
    <dd>列表主题的每一项内容</dd>
    ....
</dl>
 dd前面会有默认的缩进效果 后续css处理
        dl标签里面只允许包含dt/dd标签
        dt/dd标签里面可以嵌套任意内容(标签)
        dt/dd是兄弟关系(千万不要写错了哟)

表格标签

表格基本标签

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        ....
    </tr>
    ....
</table>
<caption>表格标题</caption>
默认居中加粗显示,位于表格的第一行,td替换th即可.
<th>表头单元格标签</th>

表格合并

跨行合并(垂直合并)
	rowspan
跨列合并(水平合并)
	colspan
合并步骤:
1. 明确合并方式(跨行/跨列)
2. 通过左上原则，确定保留谁删除谁
   • 上下合并→只保留最上的，删除其他单元格
   • 左右合并→只保留最左的，删除其他单元格
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
   • `rowspan`：跨行合并→垂直方向合并
   • `colspan`：跨列合并→水平方向合并
删除的单元格个数= 合并的个数-1
示例代码
<table border="1" width="800" height="200" rules="all" align="center">
        <tr>
            <td></td>
            <td></td>
            <!-- 跨行合并 -->
            <td rowspan="3"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <!-- <td></td> -->
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <!-- <td></td> -->
            <td></td>
        </tr>
        <tr>
            <td></td>
            <!-- 跨列合并 -->
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

表单标签:form标签 input的type类型(5种以上) 考点

input控件系列

文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选框
<input type="radio" checked name="sex">男
<input type="radio" checked name="sex">女
多选框
<input type="checkbox" checked >
文件上传
multiple:多文件上传
<input type="file" multiple>
提交按钮
<input type="submit" value="提交">
重置按钮
<input type="reset" value="重置" >
普通按钮
<input type="button"value="普通按钮">
搜索框
<input type="search">
图像提交按钮
<input type="image" src="./img/btn.png" alt="">
placeholder:占位符
单选框设置相同的name属性值才可以实现多选一效果
checked 默认被选中

button系列

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

select下拉系列

select:下拉菜单整体
option:下拉菜单的每一项
selected:默认选中下拉菜单的某一项
示例代码:
 所在城市:
    <select>
        <option>请选择城市</option>
        <option selected>上海</option>
        <option>北京</option>
        <option>深圳</option>
        <option>广州</option>
        <option>武汉</option>
    </select>

文本域

<textarea placeholder="请您留言"></textarea>

label标签

提高用户体验

使用方法①：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
	<label for="nan">男</label>
    <input type="radio" name="sex" id="nan">
    <label for="nv">女</label>
    <input type="radio" name="sex" id="nv">
使用方法②：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
 <label>文本框:<input type="text"></label>

语义化标签

无语义化标签

<div>独占一行</div>
<span>一行显示多个</span>

有语义化标签

html5新增标签,IE9以上浏览器支持,后续移动端布局经常使用.

<header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>

小结

实际项目用地比较多多的标签
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<p>段落标签</p>
<em>倾斜</em>
<strong>加粗</strong>
<img src="图像路径" alt="替换文本" title="提示文本">
<a href="链接路径" target=_self>超级链接</a>
<a href="链接路径" target=_blank>超级链接</a>
<!--无序列表-->
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ....
</ul>
<!--自定义列表-->
<dl>
    <dt>自定义列表主题</dt>
    <dd>自定义列表每一项</dd>
    <dd>自定义列表每一项</dd>
    <dd>自定义列表每一项</dd>
    ....
</dl>
<!--表格基本语法-->
<table>
    <tr>
        <td></td>
         <td></td>
         <td></td>
        ...
    </tr>
    ...
    <tr>
        <td></td>
         <td></td>
         <td></td>
        ...
    </tr>
    ...
</table>
<!--表单标签-->
文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选按钮(单选按钮需要设置相同的name属性值,才可以实现单选效果)
<input type="radio">
多选框
<input type="checkbox">
搜索框
<input type="search"  placeholder="">
普通按钮
<button type="button">普通按钮</button>
无语义化标签
<div>独占一行</div>
<span>一行显示多个,装不下会自动折行</span>

css体验

css作用:美化网页,布局页面

css引入方式面试必问考点

内嵌式
	作用于当前页面,后续小项目可以使用.	
外链式
	作用于多个页面,后续大项目使用
需要使用link标签引入外部的css文件
行内式
	作用于当前标签,不建议使用.后续配合js.

基础选择器

标签选择器类选择器 id选择器通配符选择器

字体属性

字体大小
	font-size:20px;
字体粗细
	font-weight:400(normal)|700(bold)
字体样式
	font-style:normal|italic 
字体系列
	font-family:字体系列1,字体系列2..;
字体连写    考点
font:style weight size family
font:italic 700 60px 宋体;
字体连写不能随意颠倒顺序,必须遵循;
字体连写必须保留size和family 这2个属性.

文本缩进

段落文本首行缩进
text-indent:2em;

文本(文字,图片,行内,行内块)对齐方式

text-align:left|center|right;
文本水平居中总结
如果想要 文本 span标签 a标签  img标签 input标签水平居中 对齐,给以上元素的父元素设置text-align即可.

文本装饰属性

下划线 
text-decoration: underline;
无装饰线
 text-decoration: none;
实际开发应用
取消a标签默认的下划线
a{
    text-decoration: none;
}

行高 =高度 (单行文字垂居中)

行高:设置行间距
line-height:50px;
单行文本垂直居中
行高等于当前盒子的高度
font:style weight size/line-height family
font:italic  700 30px/40px 微软雅黑
行高与字体连写注意覆盖问题.
/* 当前font-size的倍数  */
 line-height: 2;

扩展颜色取值(了解)

关键词:
background-color: pink;
rgb:
background-color:rgb(255, 255, 255)
rgba:
 background-color: rgba(0, 0, 0, .5);
十六进制
 background-color: #ff6700