首页 前端知识 Web前端课程——HTML,CSS

Web前端课程——HTML,CSS

2024-04-17 21:04:39 前端知识 前端哥 309 716 我要收藏

1.什么是HTML,CSS

1.1 HTML

HTML(HyperText Markup Language):超文本标记语言。 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。 标记语言:由标签构成的语言 HTML标签都是预定义好的。例如:使用<a>展示超链接,使用<img>展示图片,<video>展示视频。 HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

1.2 CSS

CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。 

2.HTML结构 ---定义太抽象了直接上代码

了解HTML先要了解一下HTML的结构,一看应该是可以看出来其结构

<html>
	<head>    
		   <title>标题</title>
	</head>
	<body>
    
	</body>
</html>

2.1 前端软件下载方法 VS Code

推荐看一下这篇文章前端软件 -V​​​​​​S Code-CSDN博客

下载后创建一个文件注意后缀改为.html之后输入!回车之后就会自动生成相关最基本的数据

2.2 HTML的标签

2.2.1 图片标签

<img>

src:指定图像的url(绝对路径 / 相对路径)

width:图像的宽度(像素 / 相对于父元素的百分比)

height:图像的高度(像素 / 相对于父元素的百分比)

注意:在填相关路径的时候很容易犯错误,如果图片显现不出来第一时间去看路径错误,这里推荐大家去使用相对路径。

绝对路径:绝对磁盘路径(D:/xxxx)、绝对网络路径(https://xxxx)

相对路径:从当前文件开始查找。 (./ : 当前目录, ../ : 上级目录) 

2.2.2 标题标签 

从<h1> 到<h6>大小依次减小

2.2.3 水平标签 

<hr>

2.2.4 div标签和span标签的区别--最易懂的

2.2.4.1 div

div标签 :独占一行,作用是给网页布局;是个大盒子

一行只显示一个(独占一行)

宽度默认是父元素的宽度,高度默认由内容撑开

可以设置宽高(width、height) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div与span区别</title>
</head>
<body>
    <div>这是第一个div标签</div>
    <div>这是第二个div标签</div>
    
    <div>
        <h1>div div</h1>
        <p> hello div</p>
    </div>
</body>
</html>

运行结果

 2.2.4.2 span

<span> 是一个在开发网页时大量会用到的没有语义的布局标签

特点:一行可以显示多个(组合行内元素)

宽度和高度默认由内容撑开

不可以设置宽高(width、height)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div与span区别</title>
</head>
<body>
    <!-- <div>这是第一个div标签</div>
    <div>这是第二个div标签</div>
    
    <div>
        <h1>div div</h1>
        <p> hello div</p>
    </div> -->


    <span>这是第一个span标签</span>
    <span>这是第二个span标签</span>

    <span> hello span  <strong>牛逼</strong></span>
</body>
</html>

span标签不换行直接一行给输出 包括

2.2.5 超链接标签

标签:     <a href="..." target="...">央视网</a>

属性:     

href:指定资源访问的url   

 target:指定在何处打开资源链接       

 _self:默认值,在当前页面打开       

 _blank:在空白页面打开

2.2.6 视频标签

视频标签:<video>

src:规定视频的url

controls:显示播放控件

width:播放器的宽度

height:播放器的高度

2.2.7 音频标签

音频标签:<audio>

src:规定音频的url

controls:显示播放控件

2.2.8 段落标签

段落标签:<p>

2.2.9 文本加粗标签

文本加粗标签: <b> / <strong>

<b> 和<strong>都有加粗的作用,但<strong>对语义加强更加强烈

2.2.10 表格标签

<table>:定义表格

<tr>:定义表格中的行,一个

<tr> 表示一行

<th>:表示表头单元格,具有加粗居中效果

<td>:表示普通单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表格</title>
    <style>
        td {
            text-align: center; /* 单元格内容居中展示 */
        }
    </style>
</head>
<body>
    
    <!-- border 设置表格边框  cellspcing 将单元格之间的边框距离设置为0 -->
    <table border="1px" cellspacing="0"  width="600px">
        <!-- 一行就要定义一对<tr> -->
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="img/huawei.jpg" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="img/alibaba.jpg"  width="100px"> </td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>

</body>
</html>

运行结果

2.2.11 表单标签

场景:在网页中主要负责数据采集功能,如 注册、登录等数据采集。

标签:<form>

表单项:不同类型的 input 元素、下拉列表、文本域等。

 <input>:定义表单项,通过type属性控制输入形式

 <select>:定义下拉列表

 <textarea>:定义文本域

属性:  

action:规定当提交表单时向何处发送表单数据,URL  

method:规定用于发送表单数据的方式。GET、POST

2.2.12 表单项标签

<input> 的type属性:text、password、radio、checkbox、file、date、datetime-local、time、number、hidden、button、submit

<select> 定义下拉列表

<textarea> 定义文本域

举个例子吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单项标签</title>
</head>
<body>

<!-- value: 表单项提交的值 -->
<form action="" method="post">
     <!-- input 表单项 通过type属性控制输入形式 
          radio是单选框 
          checkbox是复选框
     -->
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <input type="radio" name="gender" value="1"> 男
          <!-- 加上lable标签 可以实现点击女 就可以选中标签 -->
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">

     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

</body>
</html>

运行结果

3. CSS -化妆的东东

3.1 CSS引入方式 ---3种

行内样式:写在标签的style属性中(不推荐)

内嵌样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)

外联样式:写在一个单独的.css文件中(需要通过 link 标签在网页中引入)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈:中国底气 新思想夯实大国粮仓</title>
    <!-- 方式二: 内嵌样式 -->
    <style>
        h1 {
            /* color: red; */
            /* color: rgb(0, 0, 255); */
            color: #e63d00;
        }
    </style>

    <!-- 方式三: 外联样式 -->
    <!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>
    <img src="img/news_logo.png"> 新浪政务 > 正文

    <!-- 方式一: 行内样式 -->
    <!-- <h1 style="color: red;">焦点访谈:中国底气 新思想夯实大国粮仓</h1> -->
    
    <h1>焦点访谈:中国底气 新思想夯实大国粮仓</h1>

    <hr>
    2023年03月02日 21:50 央视网
    <hr>

</body>
</html>

 代码关于HTML的color参数有三种方式

 

 

3.2 CSS选择器

3.3 CSS样式

line-height:设置行高

text-indent:定义第一个行内容的缩进

text-align:规定元素中的文本的水平对齐方式

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5097.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!