JavaWeb之初识HTML&CSS

最新推荐文章于 2024-07-21 17:58:14 发布

Williamsgogogo

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量160

点赞数

分类专栏： javaWeb 文章标签： html css web

本文链接：https://blog.csdn.net/tysearch/article/details/116667062

版权

javaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、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）单标签<img />, <hr/>, <br/>
2）双标签<body></body>
3）如果没有内容，可以写自闭和标签<div />
4）标签嵌套<body><h1>...</h1></body>
属性：必须在开始标签(或单标签)中编写，属性值单双引号都可
<开始属性名="属性值"></结束>
注释： 
文件扩展名为*.html
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应用中的绝对路径

在这里插入图片描述

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元素定义标题。
在这里插入图片描述

<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(子元素,不影响孙子元素){ 
    样式
}

属性选择器

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

Williamsgogogo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb之初识HTML&CSS

JavaWeb之初识HTML&CSS一、HTML1.1 HTML基本结构1.2 HTML基本语法1.3 常用标签1.3.1 img图片标签1.3.2 a超链接标签1.3.3 列表标签1.3.4 table表格标签1.3.5 form表单标签1.3.5.1 表单中的组件——input组件1.3.5.2 表单中的组件——select1.3.5.3 表单中的组件——textaera1.3.5.4 表单中的组件——label1.3.5.5 表单中的组件——fieldset二、CSS2.1 CSS基本语法2.
复制链接

扫一扫

专栏目录