【HTML&CSS】

1,HTML

1.1 介绍

HTML 是一门语言,HTML(HyperText Markup Language):超文本标记语言:

  • 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容

  • 标记语言:由标签构成的语言

HTML中的标签都是预定义好的,运行在浏览器上并由浏览器解析,

W3C标准:

W3C是万维网联盟,这个组成是用来定义标准的。他们规定了一个网页是由三部分组成,分别是:

  • 结构:对应的是 HTML 语言
  • 表现:对应的是 CSS 语言
  • 行为:对应的是 JavaScript 语言

1.2 快速入门

要实现这个页面,我们需要从以下三步进行实现

  • 新建文本文件,后缀名改为 .html

    页面文件的后缀名是 .html,所以需要该后缀名

  • 编写 HTML 结构标签

    HTML 是由一个一个的标签组成的,但是它也用于表示结构的标签

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

总结:

  • HTML 文件以.htm或.html为扩展名

  • HTML 结构标签

  • HTML 标签不区分大小写

  • HTML 标签属性值 单双引皆可

  • HTML 语法松散,不加结束标签亦可

1.3 基础标签

在这里插入图片描述

1.3.1 标题标签
1.3.2 hr标签

hr 标签在浏览器中呈现出 横线 的效果。

在页面文件中书写 hr 标签

<hr>
1.3.3 字体标签

font:字体标签

  • face 属性:用来设置字体。如 “楷体”、"宋体"等

  • color 属性:设置文字颜色。颜色有三种表示方式

    • 英文单词:red,pink,blue…

    • rgb(值1,值2,值3):值的取值范围:0~255

    • #值1值2值3:值的范围:00~FF

代码演示:

<font face="楷体" size="5" color="#ff0000">传智教育</font>

注意:

font 标签已经不建议使用了,以后如果要改变文字字体,大小,颜色可以使用 CSS 进行设置。

1.3.4 换行标签
<br>
1.3.5 段落标签
<p>
刚察草原绿草如茵,沙柳河水流淌入湖。藏族牧民索南才让家中,茶几上摆着馓子、麻花和水果,炉子上刚煮开的奶茶香气四溢……
</p>

1.3.6 加粗、斜体、下划线标签
  • b:加粗标签
  • i:斜体标签
  • u:下划线标签,在文字的下方有一条横线

代码如下:

<b>沙柳河水流淌</b><br>
<i>沙柳河水流淌</i><br>
<u>沙柳河水流淌</u><br>
1.3.7 居中标签

center :文本居中

代码如下:

<hr>
<center>
    <b>沙柳河水流淌</b>
</center>

1.4 图片、音频、视频标签

  • img:定义图片

    • src:规定显示图像的 URL(统一资源定位符)

    • height:定义图像的高度

    • width:定义图像的宽度

  • audio:定义音频。支持的音频格式:MP3、WAV、OGG

    • src:规定音频的 URL

    • controls:显示播放控件

  • video:定义视频。支持的音频格式:MP4, WebM、OGG

    • src:规定视频的 URL
    • controls:显示播放控件

尺寸单位:

height属性和width属性有两种设置方式:

  • 像素:单位是px
  • 百分比。占父标签的百分比。例如宽度设置为 50%,意思就是占它的父标签宽度的一般(50%)

资源路径:

图片,音频,视频标签都有src属性,而src是用来指定对应的图片,音频,视频文件的路径。此处的图片,音频,视频就称为资源。资源路径有如下两种设置方式:

  • 绝对路径:完整路径

    这里的绝对路径是网络中的绝对路径。 格式为: 协议://ip地址:端口号/资源名称。

  • 相对路径:相对位置关系

    找页面和其他资源的相对路径。

    ./ 表示当前路径

    …/ 表示上一级路径

    …/…/ 表示上两级路径

1.5 超链接标签

a 标签属性:

  • href:指定访问资源的URL

  • target:指定打开资源的方式

    • _self:默认值,在当前页面打开
    • _blank:在空白页面打开

1.6 列表标签

HTML 中列表分为

  • 有序列表

  • 无序列表

标签说明:

有序列表中的 type 属性用来指定标记的标号的类型(数字、字母、罗马数字等)

无序列表中的 type 属性用来指定标记的形状

1.7 表格标签

  • table :定义表格

    • border:规定表格边框的宽度

    • width :规定表格的宽度

    • cellspacing:规定单元格之间的空白

  • tr :定义行

    • align:定义表格行的内容对齐方式
  • td :定义单元格

    • rowspan:规定单元格可横跨的行数

    • colspan:规定单元格可横跨的列数

  • th:定义表头单元格

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1" cellspacing="0" width="500">
    <tr>
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>

    <tr align="center">
        <td>009</td>
        <td><img src="../img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>

    <tr align="center">
        <td>008</td>
        <td><img src="../img/小米.png" width="60" height="50"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
    </tr>
</table>
</body>
</html>

1.8 布局标签

<img src="assets/image-20210811194410699.png" alt

这两个标签,一般都是和css结合到一块使用来实现页面的布局。

div标签 在浏览器上会有换行的效果,而 span 标签在浏览器上没有换行效果。

1.9 表单标签

1.9.1 表单标签概述

表单:在网页中主要负责数据采集功能,使用标签定义表单

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

form 是表单标签,它在页面上没有任何展示的效果。

1.9.2 form标签属性
  • action:规定当提交表单时向何处发送表单数据,该属性值就是URL

    以后会将数据提交到服务端,该属性需要书写服务端的URL。# 表示提交到当前页面来看效果。

  • method :规定用于发送表单数据的方式

    method取值有如下两种:

    • get:默认值。如果不设置method属性则默认就是该值
      • 请求参数会拼接在URL后边
      • url的长度有限制 4KB
    • post:
      • 浏览器会将数据放到http请求消息体中
      • 请求参数无限制的
1.9.3 代码演示

form 标签的 action 属性值设置为 # ,将其将数据提交到当前页面。注意一点,要想提交数据,input 输入框必须设置 name 属性。 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#">
        <input type="text" name="username">
        <input type="submit">
    </form>
</body>
</html>

浏览器展示效果如下:

在输入框输入 hehe ,然后点击 提交 按钮,就能看到如下效果

默认是 method = 'get',所以该取值就会将数据拼接到URL的后面。
method 属性值设置为 post,浏览器的效果如下:

可以使用浏览器的开发者工具来查看,重新提交数据后,可以看到提交的数据,如下图

1.10 表单项标签

表单项标签有很多,不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个:

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

    input 标签有个 type 属性。 type 属性的取值不同,展示的效果也不一样

  • <select>:定义下拉列表,<option> 定义列表项

  • <textarea>:文本域

注意:

  • 以上标签项的内容要想提交,必须得定义 name 属性。
  • 每一个标签都有id属性,id属性值是唯一的标识。
  • 单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="post">
        <input type="hidden" name="id" value="123">

        <label for="username">用户名:</label>
        <input type="text" name="username" id="username"><br>

        <label for="password">密码:</label>
        <input type="password" name="password" id="password"><br>

        性别:
        <input type="radio" name="gender" value="1" id="male"> <label for="male"></label>
        <input type="radio" name="gender" value="2" id="female"> <label for="female"></label>
        <br>

        爱好:
        <input type="checkbox" name="hobby" value="1"> 旅游
        <input type="checkbox" name="hobby" value="2"> 电影
        <input type="checkbox" name="hobby" value="3"> 游戏
        <br>

        头像:
        <input type="file"><br>

        城市:
        <select name="city">
            <option>北京</option>
            <option value="shanghai">上海</option>
            <option>广州</option>
        </select>
        <br>

        个人描述:
        <textarea cols="20" rows="5" name="desc"></textarea>
        <br>
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
        <input type="button" value="一个按钮">
    </form>
</body>
</html>

在浏览器的效果如下:

2,CSS

2.1 概述

==CSS 是一门语言,用于控制网页表现。

CSS也有一个专业的名字:Cascading Style Sheet(层叠样式表)。

2.2 css 导入方式

css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式:

  • 内联样式:在标签内部使用style属性,属性值是css属性键值对

    <div style="color: red">Hello CSS~</div>
    

    给方式只能作用在这一个标签上,如果其他的标签也想使用同样的样式,那就需要在其他标签上写上相同的样式。复用性太差。

  • 内部样式:定义

<link href="../css/demo.css" rel="stylesheet">

2.3 css 选择器

  • 元素选择器

    格式:

    元素名称{color: red;}
    

    例子:

    div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/
    
  • id选择器

    格式:

    #id属性值{color: red;}
    

    例子:

    html代码如下:

    <div id="name">hello css2</div>
    

    css代码如下:

    #name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/
    
  • 类选择器

    格式:

    .class属性值{color: red;}
    

    例子:

    html代码如下:

    <div class="cls">hello css3</div>
    

    css代码如下:

    .cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/
    

CSS属性可以去 CSS参考手册 查询

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BridgeCloud

生活不易,多多支持!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值