WEB05Web开发HTML&CSS

Web前端开发

什么是 Web ?

  • Web:全球广域网,也称为万维网(www World Wide Web),能够通过浏览器访问的网站。

Web 网站的工作流程

W3C

  • 万维网联盟( World Wide Web Consortium ),创建于1994年10月,主要工作是对 web 进行标准化。

HTML

快速入门

什么是HTML?

  • HTML(HyperText Markup Language):超文本标记语言

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

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

  • HTML标签都是预定义好的。例如:使用<a>展示超链接,使用<img>展示图片,<video>展示视频。

  • HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

HTML快速入门

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

  • 编写 HTML 结构标签

  • 在<body>中填写内容

基础标签

基础文本标签

超链接

  • <a>:定义超链接,用于链接到另一个资源

  • 常见属性 : href:指定访问资源的URL,支持绝对路径和相对路径两种写法 target:self,默认值,在当前页面打开;blank,在空白页面打开

图片、音频、视频标签

布局标签

布局标签

容器

  • <div>定义HTML文档中的一个区域部分,经常与CSS一起使用,用来布局页面。

  • <span>用来组合行内元素。

表格

  • <table>:定义表格 border:规定表格边框的宽度 width:规定表格的宽度 cellspacing:规定单元格之间的空白 <tr>:定义行 align:定义表格行的内容对齐方式 <td>:定义单元格 <th>:定义表头单元格

表单标签

表单标签

表单

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

  • 表单项:不同类型的 input 元素、下拉列表、文本域等。 <input>:定义表单项,通过type属性控制输入形式 <select>:定义下拉列表

    <textarea>:定义文本域

表单属性

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

  • method:规定用于发送表单数据的方式 get:浏览器会将数据直接拼接在表单的提交的 URL 之后,大小有限制 post:浏览器会将数据放到http请求消息体中,大小无限制

表单标签-表单项

表单项

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

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

  • <textarea>:文本域

CSS

快速入门

什么是CSS?

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

  • 层叠样式是指对同一个HTML标签添加多种不同的样式(字号、字体、颜色等等),所有样式会叠加在一起展示出效果

CSS引入方式

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

    <div style="color: red; font-size: 50px; "> Hello CSS </div>

  • 内部样式:定义<style>标签,在标签内部定义css样式。

  • <style> div { color: red; font-size: 50px; } </style>

外部样式:定义<link>标签,引入外部的css文件。

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

  • CSS样式使用优先级: 行内样式 > 内部和外部样式(内部和外部样式,后面覆盖前面的)

选择器

CSS选择器

  • 概念:选择器是选取需设置样式的元素(标签)

    div { color: red; }

  • 分类

样式

CSS属性

  • 38
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值