JavaWeb之初识HTML&CSS

  • 一、HTML
  • 1.1 HTML基本结构
  • 1.2 HTML基本语法
  • 1.3 常用标签
  • 1.3.1 img图片标签
  • 1.3.1.1 src相对路径
  • 1.3.1.2 src绝对路径
  • 1.3.2 a超链接标签
  • 1.3.3 列表标签
  • 1.3.4 table表格标签
  • 1.3.5 form表单标签
  • 1.3.5.1 表单中的组件——input组件
  • 1.3.5.2 表单中的组件——select
  • 1.3.5.3 表单中的组件——textaera
  • 1.3.5.4 表单中的组件——label
  • 1.3.5.5 表单中的组件——fieldset
  • 二、CSS
  • 2.1 CSS基本语法
  • 2.2 引入样式的三种方式
  • 2.2.1 行内式
  • 2.2.2 内嵌式
  • 2.2.3 外链式
  • 2.3 选择器
  • 2.3.1 选择器的优先级
  • 2.3.2 扩展选择器


一、HTML

HTML（HyperText Markup Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言，是W3C组织推荐使用的一个国际标准。用HTML编写的超文本文档称为HTML文档。

超文本：不仅可以添加文字，还可以加入链接、图片、声音、动画、影视等内容。

标记语言：是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。

1.1 HTML基本结构

<HTML> 
	<HEAD>
		<title></title>
		<meta>
	</HEAD>
	<BODY>
 		HTML 文件的正文
	</BODY>
</HTML>

元素是HTML语言的基本部分。

元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。

元素通常由三个部分组成：

  • 开始标记
  • 内容
  • 结束标记

1.2 HTML基本语法

  1. 文档声明：必须在第一行，固定格式
  2. 标签(标签要正确关闭)：
    1）单标签<img />, <hr/>, <br/> 2）双标签<body></body> 3）如果没有内容，可以写自闭和标签<div /> 4）标签嵌套<body><h1>...</h1></body>
  3. 属性：必须在开始标签(或单标签)中编写，属性值单双引号都可
    <开始 属性名="属性值"></结束>
  4. 注释： <!-- 快捷键 Ctrl+ Shift + / -->
  5. 文件扩展名为*.html
  6. html标签不区分大小写

1.3 常用标签

1.3.1 img图片标签

<img /> 操作图片，用于在网页中插入图片

属性：

  • src属性: 输入的图片路径
  • width属性: 图片的宽
  • height属性: 图片的高
  • title属性: 鼠标悬停显示字符
  • alt属性: 图片加载失败 所展示的内容
1.3.1.1 src相对路径

相对路径：是相对于当前文件

  • 同级： 直接写文件名称
  • 下级： 先用目录名称，然后再写文件名称
  • 上级：先用../返回上一级目录，然后再根据路径写文件名称
1.3.1.2 src绝对路径
  • 磁盘绝对： 文件位于磁盘的绝对地址(在当前工程中不能用)
  • 网络绝对： URL Uniform Resource Locator 统一资源定位符
  • 应用绝对： web应用中的绝对路径

java超文本组件 java是超文本标记语言吗_html

1.3.2 a超链接标签

超链接标签 a标签 <a></a>，实现超链接。

属性：

  • href属性: 要跳转到的路径(地址)，可以是相对路径，也可以是绝对路径
    href=#表示当前界面刷新一下
  • target属性:
    _self : 默认值, 默认打开的网页就是当前网页
    _blank: 新建窗口打开网页
<a href="https://www.baidu.com/">百度一下</a>
<a href="https://www.baidu.com/" target="_self">百度一下</a>
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<a href="#">此处就是一个超链接</a>

1.3.3 列表标签

ol li: 有序列表
ul li: 无序列表

<ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
</ul>

1.3.4 table表格标签

table 表格，作用是在在网页中生成一个二维表格
tr 一行
td 一列
th标题列，默认加黑加粗

属性：

  • border属性: 边框线
  • width属性: 宽度
  • cellpadding属性: 单元格和文字的距离
  • cellspacing属性: 单元格和单元格的距离
  • bgcolor属性: 背景色 backgroundColor
    #87ceeb 十六进制颜色 三原色的混合 rgb
  • align 属性: 排列方式
    left : 靠左
    right : 靠右
    center: 居中

1.3.5 form表单标签

form表单是由网页上可以提供用户输入和选择的一些控件（表单元素）组成。

表单的作用：

  • 收集用户的数据
  • 将数据提交给服务器(java程序)

属性：

  • action="" : 提交的地址
  • method="get/post" : 提交方式

get和post的相同点：

  • 都是提交数据的方式，数据都以键值对key=value的方式拼接,第一组键值对以?的方式拼接,后续的每一组使用&拼接

get和post的相同点：

  • get提交的数据会显示在地址栏，不安全，且提交的数据长度有限制
    http://域名?key=value&key=value&key=value
  • post提交的数据不会再地址栏上显示，对提交的数据长度也没有长度的限制
1.3.5.1 表单中的组件——input组件

input (自闭合标签)

属性：

  • type类型,取值如下:
    text 默认值,表示文本框
    password 密码框
    date 日期框
    radio 单选框
    checkbox 复选框 多选框
    file 文件
    submit 提交
    reset 重置(恢复默认)
    button 按钮(没有特殊意义 必须要结合javascript)
    hidden 隐藏域
  • name 表示提交的键,单选按钮中产生互斥效果
  • value 表示提交的值

注意，当input的type值为checkbox和radio时，需要有选中状态 需要加入checked属性 checked="checked"。

1.3.5.2 表单中的组件——select

select 下拉框，需要与option一起使用，可以在select上可以使用name属性
option 下拉框中的选项,在option上可以使用value属性 有默认值选项selected属性selected="selected"

<select name="edu">
      <option>请选择</option>
      <option value="1">小学</option>
      <option value="2" selected="selected">初中</option>
      <option value="3">高中</option>
</select>
1.3.5.3 表单中的组件——textaera

textarea 文本域，可以输入多行文本

属性：

  • rows 属性值为数字，表示行数
  • cols 属性值为数字，表示列数
<textarea name="desc" cols="20" rows="10" >此处书写默认值</textarea>
1.3.5.4 表单中的组件——label

label不会呈现特殊效果,它的作用是为鼠标用户提高可用性。如果在label标签内点击文本，就会触发此控件。（需与id一同使用，for与id的属性值保持一至）

<label for="username">用户名:</label>
<input type="text" name="name" placeholder="请输入您的用户名" id="username" /><br/>
1.3.5.5 表单中的组件——fieldset

当一组表单元素放到fieldset中时，浏览器会使用线框包裹显示这一组元素。

legend是为fieldset元素定义标题。

java超文本组件 java是超文本标记语言吗_web_02

<fieldset><legend>用户必填信息</legend>
        用户名：<input type="text"name="userName"><br>
        密码：<input type="password"name="pwd"><br>
        性别：<input type="radio"name="gender"value="male">男<input type="radio"name="gender"value="female">女<br>
        兴趣爱好：<input type="checkbox"name="hobby"value="eat">吃饭<input type="checkbox"name="hobby"value="sleep">睡觉
                  <input type="checkbox"name="hobby"value="learning">上课<input type="checkbox"name="hobby"value="coding">敲代码<br>
</fieldset>

二、CSS

CSS(cascading style sheets) ：层叠样式表

样式：HTML标签在页面的显示效果

2.1 CSS基本语法

需求：

  • 选择器：谁要做样式改变
  • 声明：做什么样的样式改变

格式：

选择器{
	属性名:属性值;
	属性名:属性值;
}

每一条声明由一个属性和一个属性值组成，使用冒号分割，以分号结尾。

css 对于空格，换行和缩进不敏感。

合理的缩进和换行可以调高代码的可阅读性。

2.2 引入样式的三种方式

2.2.1 行内式

行内式：在标签的内部书写 style属性，只能修改一个元素的样式
style="属性名称:属性值;属性名称:属性值;"

<h2 style="color: red;text-align: center;font-size: 16px;font-family:Arial">静夜思</h2>

优点：写法简单；
缺点：

  • 结构和样式没有分离，不利于维护
  • 样式不能复用，只对单一元素生效

不建议在开发中使用。

2.2.2 内嵌式

内嵌式：在head标签中书写style 标签，把css代码放在style标签中

<style>
       span {
       		color: blue;
        	font-size:30px
        }
</style>

优点：

  • 结构与样式分离
  • 样式可以复用，便于维护

缺点：只在当前界面生效

2.2.3 外链式

外链式：通过link标签将独立的css文件引入到html页面中

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

link: 链接
href="css/demo.css"链接的资源
rel="stylesheet" 使用的是样式stylesheet表

优点：

  • 结构与样式完全分离
  • 便于维护
  • 多个页面可以复用
  • 可以利用浏览器缓存机制，加快页面加载速度

2.3 选择器

id选择器

语法:

  • 在标签上书写一个属性 id=“值任意(不能以数字和特殊符号开头,不能重复)”
  • 使用 #id的名称
#id名称{
	样式
}

类选择器

语法：

  • 在每一个标签上 书写一个class属性 class=“任何值(可以重复，但是不能以数字和特殊符号开头)”
  • 使用 .class的名称
.class名称{
    样式
}

标签选择器

标签的名称{
	样式
}

2.3.1 选择器的优先级

id选择器优先级最高 > 类选择器 > 标签选择器
越精准的选择器 优先级越高

2.3.2 扩展选择器

并集选择器 ,

选择器1,选择器2,选择器3....{
    样式
}

层级选择器 空格 选择器1下的选择器2样式修改 所有的选择器2都会修改

选择器1 选择器2 {
    样式
}

层级选择器 >

选择器1>选择器2(子元素,不影响孙子元素){ 
    样式
}

属性选择器

标签名称[属性名=属性值]{
     样式
}