第一章 HTML与CSS

第一章 HTML与CSS

  • 1.课引
  • 2.B/S软件结构
  • 3.前端开发流程
  • 4.网页的组成部分
  • 5.HTML简介
  • 6.创建HTML页面
  • 7.HTML书写规范
  • 8.HTML标签的介绍
  • 9.HTML标签的语法
  • 10.font标签
  • 11.特殊字符
  • 12.标题标签h1-h6
  • 13.超链接标签
  • 14.无序列表
  • 15.img标签
  • 16.table标签

1.课引

CSS决定页面及布局效果
HTML决定剩下的内容

2.B/S软件结构

第一章 HTML与CSS_第1张图片

第一章 HTML与CSS_第2张图片

3.前端开发流程

第一章 HTML与CSS_第3张图片

4.网页的组成部分

第一章 HTML与CSS_第4张图片

5.HTML简介

在这里插入图片描述

6.创建HTML页面

第一章 HTML与CSS_第5张图片
第一章 HTML与CSS_第6张图片

7.HTML书写规范

en是英文
在这里插入图片描述
第一章 HTML与CSS_第7张图片
第一章 HTML与CSS_第8张图片

8.HTML标签的介绍

第一章 HTML与CSS_第9张图片
第一章 HTML与CSS_第10张图片
第一章 HTML与CSS_第11张图片
第一章 HTML与CSS_第12张图片
第一章 HTML与CSS_第13张图片
第一章 HTML与CSS_第14张图片
第一章 HTML与CSS_第15张图片
第一章 HTML与CSS_第16张图片

第一章 HTML与CSS_第17张图片
< br />表示换行
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
第一章 HTML与CSS_第18张图片
< hr/>表示加一条水平线
第一章 HTML与CSS_第19张图片
第一章 HTML与CSS_第20张图片

9.HTML标签的语法

第一章 HTML与CSS_第21张图片
第一章 HTML与CSS_第22张图片

10.font标签

第一章 HTML与CSS_第23张图片
第一章 HTML与CSS_第24张图片

第一章 HTML与CSS_第25张图片

11.特殊字符

第一章 HTML与CSS_第26张图片
这里浏览器认为这是一个换行
第一章 HTML与CSS_第27张图片
在这里插入图片描述
第一章 HTML与CSS_第28张图片
第一章 HTML与CSS_第29张图片

在这里插入图片描述
第一章 HTML与CSS_第30张图片
在这里插入图片描述
第一章 HTML与CSS_第31张图片
这里只要是连续的空白字符,不管是空格,回车,制表符。
只要是空白的,就全部去掉只剩下一个
第一章 HTML与CSS_第32张图片
第一章 HTML与CSS_第33张图片
在这里插入图片描述

12.标题标签h1-h6

第一章 HTML与CSS_第34张图片
第一章 HTML与CSS_第35张图片
标题也有一些属性,比如对齐属性
左对齐,居中,右对齐
第一章 HTML与CSS_第36张图片
第一章 HTML与CSS_第37张图片
不管屏幕大小,它都可以自动调整
第一章 HTML与CSS_第38张图片
第一章 HTML与CSS_第39张图片

13.超链接标签

在这里插入图片描述
第一章 HTML与CSS_第40张图片

在这里插入图片描述
第一章 HTML与CSS_第41张图片
第一章 HTML与CSS_第42张图片
第一章 HTML与CSS_第43张图片

14.无序列表

第一章 HTML与CSS_第44张图片

第一章 HTML与CSS_第45张图片
第一章 HTML与CSS_第46张图片
有序列表就是将ul换成ol
第一章 HTML与CSS_第47张图片
如果想要取消圆点,则
第一章 HTML与CSS_第48张图片
但此时我如果使用IE浏览器打开,圆点又出现了
第一章 HTML与CSS_第49张图片
只要涉及到浏览器的问题,或多或少多会有一些兼容问题

15.img标签

第一章 HTML与CSS_第50张图片
第一章 HTML与CSS_第51张图片

我现在在html中,我要上传的是img中的图片。
我首先要到html的上一级中,然后再到img中
第一章 HTML与CSS_第52张图片

第一章 HTML与CSS_第53张图片
图片很大,页面无法完全显示,下面我们改一下它的大小
第一章 HTML与CSS_第54张图片
第一章 HTML与CSS_第55张图片
第一章 HTML与CSS_第56张图片
第一章 HTML与CSS_第57张图片
如果我们要给照片加一个边框效果
在这里插入图片描述
第一章 HTML与CSS_第58张图片
在这里插入图片描述
第一章 HTML与CSS_第59张图片
第一章 HTML与CSS_第60张图片

16.table标签

第一章 HTML与CSS_第61张图片
第一章 HTML与CSS_第62张图片
第一章 HTML与CSS_第63张图片

我们这里还没有加边框
第一章 HTML与CSS_第64张图片
下面我们加一个边框
第一章 HTML与CSS_第65张图片
第一章 HTML与CSS_第66张图片
如果要加粗其中的内容,我们可以加一个< b>< /b>
第一章 HTML与CSS_第67张图片

第一章 HTML与CSS_第68张图片
如果要将其居中,则
第一章 HTML与CSS_第69张图片
第一章 HTML与CSS_第70张图片
< th>标签结合了前面两个的特点
第一章 HTML与CSS_第71张图片
第一章 HTML与CSS_第72张图片

你可能感兴趣的:(JavaWeb,html,css,前端)