JavaWeb零基础学习Day1——HTML&CSS

前 言

主包这边已经在大一的时候学过前端基础开发,所以同样学过的同学可以直接从day2的JS开始看起,但是基础不扎实的同学建议看一下day1,稍微掌握一下基础的即可,以后工作了可以直接用cursor对接需求。

一.HTML和CSS

1.含义

**HTML:**超文本标记语言

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

**CSS:**层叠样式表,用于控制页面的样式(表现)

2.快速入门步骤

  • 新建文本文件,后缀名改为.html
  • 编写HTML结构标签
  • 在<body>中填写内容
html 复制代码
<html>
    <head>
            <title>html的快速入门</title>
    </head>
    <body>
            <h1>hello HTML</h1>
            <img src =  "1.jpg">
    </body>
</html>

特点:

  • HTML标签不区分大小写
  • HTML标签属性值单双引号都可以
  • HTML语法松散

二.基础样式及标签

1.标题排版

图片标签:<img>

  • **src:**指定图像的url(绝对路径/相对路径)
  • **width:**图像的宽度(像素/相对于父元素的百分比)
  • **height:**图像的高度(像素/相对于父元素的百分比)

标题标签:<h1> - <h6>

水平线标签:<hr>

注:

  • **绝对路径:**绝对磁盘路径(D:xxxx)、绝对网络路径(https://xxxx)
  • **相对路径:**从当前文件开始查找。(./:当前目录,../:上级目录)

2.标题样式

CSS引入方式:

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

html 复制代码
<h1 style = "xxx:xxx;xxx:xxx;">中国新闻</h1>

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

html 复制代码
<style>
    h1{
        xxx:xxx
        xxx:xxx
        }
</style>

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

html 复制代码
<link rel = "stylesheet" href = "css/news.css">

注:<span>标签无语义,作用是组合行内元素,不换行

**优先级顺序:**id选择器 > 类选择器 > 元素选择器

**注:**font-size是设置字体大小(注意记得加上px)

3.超链接

标签:

html 复制代码
<a href = "..." target = "...">央视网</a>

属性:

  • **href:**指定资源访问的url
  • **target:**指定在何处打开资源链接
  • **_self:**默认值,指的是在当前页面打开
  • **_blank:**在空白页面打开

如果不想默认添加超链接后变成蓝色和下划线,可以用text_decoration来规定添加到文本的修饰,none表示定义标准的文本

注: 以上内容和样式包括其他的可以去https://www.w3school.com.cn/这个链接查看

三.正文

1.正文排版

如果要设置首行缩进,可以在p标签的css样式中设置text_indent

**br:**换行标签

**line-height:**设置行高

**b:**加粗标签

**text-align:**设置对齐方式

**注:**在HTML中无论输入多少个空格,只会显示一个,可以使用多个空格占位符&nbsp来显示

2.页面布局

**布局标签:**在实际开发网页中,会大量使用div和span这两个没有语义的布局标签

标签:<div><span>

特点:

  • div标签:
    • 一行只显示一个(独占一行)
    • 宽度默认是父元素的宽度,高度默认由内容撑开
    • 可以设置宽高
  • span标签:
    • 一行可以显示多个
    • 高度和宽度默认由内容撑开
    • 不可以设置宽高

如果想要居中显示,可以用margin:0 auto,上下为0,左右一半,自动居中对齐

**注:**如果只是需要设置某一个方位的边框,内边距,外边距,可以在属性名后加上-位置,如:padding-top,padding-left....

四.表格和表单

1.表格标签

注:如果是表头单元格,用<th>拥有表头字体加粗及居中显示的效果;普通单元格用<td>即可

2.表单标签

  • **场景:**在网页中主要负责数据采集功能,如:注册、登录等数据采集
  • 标签:<form>
  • 表单项: 不同类型的input元素、下拉列表、文本域等等
    • **<input>:**定义表单项,通过type属性控制输入形式
    • **<select>:**定义下拉列表
    • **<textarea>:**定义文本域
  • 属性:
    • **action:**规定当提交表单时向何处发送表单数据,表单数据提交的url地址
    • **method:**规定用于发送表单数据的方式(GET、POST),其中GET是默认方式

**注:**表单项必须有name属性才可以提交

相关推荐
是苏浙几秒前
零基础入门C语言之操作符详解2
c语言·开发语言
野犬寒鸦1 分钟前
从零起步学习MySQL || 第十章:深入了解B+树及B+树的性能优势(结合底层数据结构与数据库设计深度解析)
java·数据库·后端·mysql·1024程序员节
元拓数智10 分钟前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节
mapbar_front14 分钟前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
sensen_kiss28 分钟前
INT301 Bio-computation 生物计算(神经网络)Pt.2 监督学习模型:感知器(Perceptron)
神经网络·学习·机器学习
总有刁民想爱朕ha40 分钟前
银河麒麟v10批量部署Python Flask项目小白教程
开发语言·python·flask·银河麒麟v10
天一生水water1 小时前
three.js加载三维GLB文件,查看三维模型
前端·1024程序员节
无风听海1 小时前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
yi碗汤园1 小时前
【一文了解】八大排序-插入排序、希尔排序
开发语言·算法·unity·c#·1024程序员节
没有bug.的程序员1 小时前
Spring 常见问题与调试技巧
java·后端·spring·动态代理·1024程序员节