初识HTML
- 前端基础
- HTML的标准结构
- 常见的文本标签
- - 标题标签
  - 水平线标签（分割线）
  - 段落标签
  - 换行标签
  - 文本格式化标签
  - 引用标签
  - 列表标签
  - 滚动标签
  - 块元素
  - 原样输入标签
  - 转义字符
- 图像标签
- - 图像连接
- 超链接标签
- 表格标签
- - 合并单元格
- 表单标签
- - 表单提交get和post面试题
- 框架标签
- CSS
- - 常用的CSS选择器
  - CSS里面特殊的选择器(伪类选择器)
  - CSS中常用的样式属性
  - - CSS文本样式
    - 边框样式

初识HTML

前端基础

1.HTML：超文本标记语言（全称：Hyper Text Markup Language）
2.可以针对文本，图片，动画，文档等等都可以标记（举例：设置图片大小\设置字体颜色……）

HTML的标准结构

<!DOCTYPE html><html>                             根标签<head>                         头标签<title>这里是标题</title+></head><body>浏览器显示的内容</body>
</html>

添加注释：Ctrl + shift+/或Ctrl +/

常见的文本标签

标题标签

h1—h6 从大到小的标题

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>

效果如图：

水平线标签（分割线）

<hr/>

效果如图：

段落标签

段落标签 p标签在插入段落标签的时候，前后会给我们加入空行

<P>这里是内容</P>

效果如图：

换行标签

换行标签 br 没有开始标签，它会在浏览器里标记一个空行

<br />

效果如图：

文本格式化标签

常见的一些文本格式化标签：i标签、b标签、strong标签、em标签

b和strong的区别：
共同点：都是加粗的意思，对某段文本内容进行加粗标记
不同点：
如果没有，语义上的一种强调,那么就去使用b标签（通用加粗标签：使用b标签）
如果由语义上的强调,那么就使用strong

i和em的区别
共同点：都是标记斜体标签
不同点：
如果没有语义强调就使用i标记（通用斜体标记）
如果有语义强调，使用em标签

<b>这里是内容</b>
<strong>这里是内容</strong>
<i>这里是内容</i>
<em>这里是内容</em>

效果如下：

引用标签

1.短引用 q 元素

<q>这里是内容</q>

2.长引用

会将内容进行缩进处理，类似于在键盘上敲 Tab键

<blockquote>不患无位，患所以立。不患莫己知，求为可知也。 --论语·里仁篇</blockquote>

效果如下：

列表标签

1.无序列表

ul标签属性：tupe：给列表项前面的标记值
disc.实心圆点——不写就是默认值
circle：空心圆点
square：实心小正方形

<ul><li>这是内容</li><li>这是内容</li><li>这是内容</li>
</ul>
<ul type="circle"><li>这是内容</li><li>这是内容</li><li>这是内容</li></ul><ul type="square"><li>这是内容</li><li>这是内容</li><li>这是内容</li></ul>

效果如图：

2.有序列表

ol标签属性：type——默认值为1，可设置其他值为A a Ⅰ i,效果同无序列表

<ol><li>这里是内容</li><li>这里是内容</li><li>这里是内容</li></ol>

3.自定义列

定义列表用dl
定义列表项用dt
具体项的定义用dd

<dl><dt>定义列表项<dd>具体项的定义</dd><dd>具体项的定义</dd></dt><dt>定义列表项<dd>具体项的定义</dd><dd>具体项的定义</dd></dt></dl>

效果如图：

滚动标签

滚动标签 marquee

属性:

背景色bgcolor

滚动的方式:behavior——默认值scroll :连续滚动
slide:滑动一次到浏览器边框停止掉
alternate:来回滚动

滚动的方式direction ——默认属性值 left(从右到左)
right:(从左到右)
up
down

运动速度scrollamount ，值是正整数 ,默认值是6

停顿时间scrolldelay，值是正整数，默认为0，单位是毫秒

<marquee>这里是内容</marquee>

块元素

1.div 块元素占一行空间，多个div之间会自带换行效果
应用场景：结合CSS完成层级页面

2.span 行内标签，不会像div元素在同一行上
应用场景:前端完成表单校验去做的;
举例: 用户在输入用户名之后,后面会
有提示信息
使用span标签动态完成文本内容的设置

原样输入标签

将我们写的文本内容使用pre包裹起来，浏览器就会按照我们文本的格式进行展示；

<pre>泉眼无声惜细流，树阴照水爱晴柔。小荷才露尖尖角，早有蜻蜓立上头。</pre>

效果如图：

转义字符

&nbsp； 相当于敲了一个空格
&ensp；相当于敲了俩个空格
&gt; 在浏览器将“>”进行转义
%lt; 在浏览器将“<”进行转义
&copy；版权所有 ©
%reg; 注册商标  ®
<sub>下标</sub>
<sup>上标</sup>

图像标签

<img src="url" alt="" title="" width="" height="" >

src:连接到的图片地址 url(统一字符定位符)
src:使用相对路径
相对路径：在当前这个web项目下的路径地址
绝对路径：E:\java\10-18\code\html-10-18\img\leijun.jpg
width：宽度
height：高度
可以指定像素px（当前某个点），还可以指定百分比（根据屏幕分辨率）
图像在设置的时候，本身就和图片的尺寸有关系（UI设计师，一张图像，给前端人员切图成各种尺寸）
title：鼠标悬浮在图片上显示的文字提示
alt:替代文本，当图片链接失效了，这个时候替代文本起作用，显示文字描述什么图片
…/ 返回上一级目录

图像连接

用a标签包裹img图像标签

超链接标签

1.第一种用法：

<a href="url" target="" name="">

使用 href 属性-创建指向另一个文档的链接
href=“url” url称为“网络资源定位符号”
可以使用本地地址也可以是网络地址
target：打开资源地址的方式
默认打开方式：_self（当前窗口打开新地址）
_blank（新建一个窗口打开）

2.第二种用法：书签（锚点）
通过使用name属性-创建文档内的书签作为“锚链接来使用”
在同一个html下
1）打锚点（创建一个锚点）

     <a name="锚点名称"></a>

2）创建跳转链接（需要从某个位置跳转到上面锚点位置）

     <a href="#锚点名称">跳转到锚点</a>

在不同页面下进行锚点跳转
1）在另一个页面的某个位置打锚点（创建一个锚点(标记/书签)）

<a name="锚点名称"></a>

2)当前页面创建跳转连接,跳转到另一个页面的那个锚点位置

<a >跳转到锚点</a>

表格标签

格式

<table>
<coption></coption><tr><th></th></tr><tr><td></td></tr></table>

下面有子标签
tr:行
属性align：将td中的内容进行对齐方式
行的子标签
td：一行指定的单元格（普通单元格）
th:给单元格设置表头信息（自动居中）
按照上面的信息写了表格，但是没有表格的格式
table里面的属性：
1）border:表格边框线单位为像素大小(指定1-5px,值越大,边框线越粗)
2）cellspacing:设置表格单元格和边框之间的空隙,设置0,将单元格边框和表格的边框合并了
3）width和 height:宽度和高度像素大小或者占整个分辨率的百分比
4）align:给表格设置对齐方式 center 中间对齐

合并单元格

td标签的属性
rowspan:行合并(合并行) 你当前这个单元格行合并所占的格子数量
colspan:列合并(合并列) 你当前这个单元格列合并所占的格子数量
示例如下：

</head><body><table border="" cellspacing="0" cellpadding="" align="center" bgcolor="pink" width="500px" height="500px"><!-- font字体标签 color颜色属性  --><caption><font size="5" color="#F0516">学生信息</font></caption><tr align="center"><th>学生编号</th><th>学生姓名</th><th>学生年龄</th><th>学生性别</th><th>学生住址</th><th>体育成绩</th></tr><tr align="center"><td>1</td><td>鹿兆鹏</td><td>32</td><td>男</td><td>白鹿原</td><td>80</td></tr><tr align="center"><td>2</td><td>白灵</td><td>29</td><td>女</td><td>白鹿原</td><td>75</td></tr><tr align="center"><td>3</td><td>白嘉轩</td><td>45</td><td rowspan="3">男</td><!-- 合并行 指定单元格格子数量 --><td>北京市</td><td>90</td></tr><tr align="center"><td>4</td><td>鹿三</td><td>46</td><!-- <td>男</td> --><td>上海市</td><td>65</td></tr><tr align="center"><td>5</td><td>白兴</td><td>48</td><!-- <td>男</td> --><td>北京市</td><td>80</td></tr><tr align="center"><td colspan="5">平均成绩</td><!-- 单元格列合并 所占的格子数量 --><!-- <td></td> --><!-- <td></td> --><!-- <td></td> --><!-- <td></td> --><td>75</td></tr></table>

效果如图

表单标签

form标签——用来提交数据
属性:action=“url服务器地址”
method=“提交方式”
两种:get/post(默认提交方式就是get:在浏览器直接输入访问地址都是默认get提交)

<form action="url" method="">
<input type="">
<form>

属性 type=“text” 文本输入框
type=“password” 密码输入框
type=“radio” 单项按钮
type=“chechbox” 复选框
type=“date” 日期组件
type=“file” 文件上传组件
type=“email” 邮箱组件
type=“button” 普通按钮结合value去使用，给按钮默认值
type=“submit” 结合value属性=“登录/注册” 特殊的提交按钮,将用户的信息提交到了action=“服务器地址”
type=“reset” 重置按钮
type=“hidden” 隐藏域,没有效果,但是可以提交数据

下拉菜单select标签子标签：
下拉选项:option
文本域:textarea
指定书写的行数:rows
一行有多个字符:cols

表单提交get和post面试题

get提交:
1)会将用户的信息提交到地址栏上
格式是在action的url地址后面?表单项标签中name属性值1=输入的内容值1&name属性的属性值2=输入内容2…
2)get提交,不适合提交用户的私密数据(像登录密码,需要进行处理加密(Java中–MD5加密的工具))
3)get提交由于在地址栏上的,所以提交的数据大小有限制!

post提交:HbuilerX运行,提交,找不到地址
手动方式去运行这个页面(不要使用工具运行)
1)不会将用户信息提交到地址栏上
2)相对get安全,安全一些,但是密码的信息还需要加密的(后期通过工具加密)
3)相对get来说不会将信息提交地址栏上,所以提交数据大小无限制的!

框架标签

框架标签 frame
框架集标签:frameset
示例如下：
1.框架集

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>框架标签</title></head><frameset rows="20%,*,10%"><frame src="logo.html"><!--从左到右 左边菜单和中间页面--><frameset cols="15%,*"><frame src="左边菜单.html"  /><!-- frame里面一个属性name:给框架包含的页面起名字 --><frame src="中间页面.html" name="main" /></frameset><frame src="底部版权信息.html" /></frameset><body></body>
</html>

2.logo.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>logo</title></head><body><img src="img/logo.png" width="100%" height="70%"></body>
</html>

3.左边菜单.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>左边菜单</title></head><body><p>学生管理</p><ul><li><a href="学生信息.html"  target="main">查询学生</a></li><li><a href="添加学生.html" target="main">添加学生</a></li><li><a href="#">删除学生</a></li></ul></body>
</html>

4.中间页面.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>中间页面</title></head><body><p>这是中间的内容</p></body>
</html>

5.底部版权信息

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>底部版权信息</title></head><body ><center><p>xxx公司版权所有<sup>&copy;</sup> 2022-2023</p>&gt;&quot</center></body>
</html>

效果如图：

注意事项:
当点击左边菜单页的超链接 ,a标签的target属性指定在具体frame中打开,和frame中的name属性值一致即可!

CSS

Cascading Style Sheet 层叠样式表
需要前端人员或者后端人员(Java开发/Python开发…,必须要懂前端的基础东西:html/css/js)

使用方式
方式1:在html标签中指定style属性 (行内样式):仅仅某个局部位置给某个标签单独设置的时候,直接用这种方式
style=“样式属性名称1:值1;样式属性名称2:值2;…”
弊端:一次只能修饰一个标签
方式2:内部方式(内联样式)
在head标签体中

<style>
CSS选择器{
样式属性名称1:值1;
样式属性名称2:值2;
...
}
<style>

好处:优于第一种方式;一次可以控制多个标签
弊端:css代码和html标签混合到一块,不利于维护管理
3.CSS常用选择器
方式3:外部方式(外联样式)
在web项目下:根目录创建一个css文件夹,创建一个 xx.css文件
css文件中书写css代码
CSS选择器{
样式属性名称1:值1;
样式属性名称2:值2;
…
}
在当前页面中,导入指定的css文件

<link href="引入xx.css文件" rel="stylesheet"/>

常用的CSS选择器

标签名称选择器{
样式属性名称1:值1;
样式属性名称2:值2;
…
}

class选择器(类选择器)
需要在你的标签指定class属性=“值”
.class属性值{
样式属性名称1:值1;
样式属性名称2:值2;
…
}
同一个页面中的class属性值是可以同名的!
class(类)选择器 :同一类元素优先级 > 标签名称选择器

id选择器
在标签中指定id=“值”,注意:id选择器的id的值,必须唯一的!
(id属性值唯一,能够解决浏览器中部分标签的兼容性问题)
但是我们现在没有学习js(javascript),所以id值重复,也可以展示被id选中的效果;
#id属性值{
样式属性名称1:值1;
样式属性名称2:值2;
…
}
上面三个选择器是设置css的最基本选择器
优先级：id选择器 > class选择器 > 标签名称选择器

组合选择器:
4. 并集选择器
选择器1,选择器2,选择器3…{ 选择器可以是上面id,class类,标签名称选择器
样式属性名称1:值1;
样式属性名称2:值2;
…
}
5. 子元素选择器
选择器1 选择器2 { 选择器2选中的标签是选择器1的子标签
样式属性名称1:值1;
样式属性名称2:值2;
…
}
6 后代选择器:
选择器1 > 选择器2 { //选择器2选中的元素是选择器1的后代元素
样式属性名称1:值1;
样式属性名称2:值2;
…
}

CSS里面特殊的选择器(伪类选择器)

伪类用于定义元素的特殊状态

状态:
1)link状态:鼠标未访问状态
2)hover状态(使用居多):鼠标经过状态
3)avtive状态:鼠标获取焦点状态
(激活,点击了,但是没有松开),超链接就是这种
4)visited状态:鼠标访问过了状态(举例:超链接点了松开后,就访问了)

css代码书写格式:
选择器:状态名称{
样式属性名称1:值1;
样式属性名称2:值2;
...
}

注意:
1)状态名称不区分大小写,但是建议小写
2)注意：规定这个先后顺序: 才能出现循环的效果
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！

<style>/*1)link状态:鼠标未访问状态*/a:link{font-size: 30px;color:red;}/* 4)visited状态:鼠标访问过了状态(举例:超链接点了松开后,就访问了) */a:visited{font-size: 40px;/* 字体类型 */font-family:"楷体" ;color: darkgray;/* 去掉下划线 */text-decoration: none;}/* 2)hover状态(使用居多):鼠标经过状态 */a:hover{font-size: 35px;color: green;/*文本修饰:去掉超链接下划线*/text-decoration: none;}/*3) avtive状态:鼠标获取焦点状态(激活,点击了,但是没有松开),超链接就是这种*/a:active{font-size: 30px;color: royalblue;/*加入下划线*/text-decoration: underline;}</style>

CSS中常用的样式属性

CSS文本样式

1）文本颜色 color
2）文本对齐样式 text-align
属性left center right
3）文本修饰 text-decoration 属性用于设置或删除文本装饰。
underline:设置下划线
none:不设置任何修饰
overline:上划线
line-through:中划线(电商平台:打折之后原件上面的中划线)
4）文本转换 (了解)：text-transform
capitalize:将每个单词首字母大写
uppercase:将英文单词转换成大写
lowercase:将英文单词转换成小写
5）文本缩进：text-indent
6）指定文本中字符之间的间距：letter-spacing
7）文本阴影
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px)
后面添加文本颜色: text-shadow: 2px 2px red;

边框样式

边框有四个边框上边,下边,左边,右边边框的颜色样式属性:border-top-color:上边框的颜色border-bottom-color:下边框的颜色border-left-color:左边框的颜色border-right-color:右边框的颜色边框的颜色有了,但是需要指定边框的宽度 px大小即可border-top-width:上边框的宽度border-bottom-width:下边框的宽度broder-left-width:左边框的宽度border-right-color:右边框的宽度上面设置的边框的颜色和宽度都有了,还不行,必须要指定边框的样式属性 solid单实线,double双实线,dashed虚线,dotted点border-top-style:上边框的样式border-bootom-style:下边框的样式border-left-style:左边框的样式border-right-style:右边框的样式上面的写法很麻烦: w3c组织规定:为了简化书写格式边框的颜色简写属性 border-color边框的宽度简写属性 border-width边框的样式简写属性 border-style这些简写我怎么判定它的方向(上,下,左,右)?1)默认的方向 : 上 右  下 左2)某一边没有设置颜色,宽度,样式的话,那么默认补齐对边的颜色/宽度/样式

最终的简写格式:边框的简写属性(必须按照先后顺序写)
border:border-width border-style（必需） border-color

（第一周完）

学习java之路之第一周html相关推荐

学习java之路之第二周
目录常用的dos窗口命令盘符号的切换进入指定单个文件夹(目录) cd 目录名称进入多级目录 cd 多级目录的路径回退上一级目录 cd.. 或者cd .. 如果现在处在多级目录路径上,想回退盘 ...
Java获取指定月份第一周第一天
Java获取指定月份第一周第一天思路: 1.获取当前月份第一天 2.获取第一天对应周几 3.根据周几减去对应天数得到指定日期 @Testpublic void test2(){Date lastWe ...
201521145048《Java程序设计管理》第一周学习总结
1. 本周学习总结学习并了解Java的发展与历史在网上视频中学习Java 了解并区分JVM JRE JDK 将java与已学语言做比较,发现相同处 2. 书面作业 Q1.为什么java程序可以跨平 ...
守护石谈学习Java之路
这次在CSDN Blink发表了几篇关于Java编程学习的小作文,讲述了Java工程师的成长路线.Java学习的技能树和入门工作要关注的核心问题,我继续做一次文章的整合与延展,以文章的形式发表出来,勉 ...
（个人）VR实时交互的太极拳学习系统创新实训第一周（2）
这周主要进行了人物模型和示例动画的制作和利用动捕进行舞蹈学习的论文的学习. 使用Neuron和Motion Builder进行了太极拳动作的采集和处理.以下是我使用Motion Buileder导出模 ...
Java入门日记1 | 第一周总结
一个不精致的开头: 准确来说今天是我初学Java的第一天.课上老师指导我们怎么下载--怎么安装--怎么配置等等,但是关于Java语法那是密不透风,生怕走漏风声的一个大动作.这种情况下还要做题,言下之意 ...
学习java之路之第五周
目录常用类 Object hashCode() String toString() boolean equals(Object obj) clone():克隆 Scanner String类 Str ...
《Java高级程序设计》第一周作业
(1)加入<Java高级程序设计>课程QQ群,群名片改为实名. (2)在博客园创建个人账号并申请开通博客,用于学习笔记和阅读报告等的发布,关注教师博客每周至少在博客园上发表一篇学习笔记,记 ...
（个人）VR太极拳学习系统-创新实训第一周（1）
项目简述我们预计开发一个基于虚幻4引擎的帮助用户学习太极拳的实时系统,该系统会使用到当前比较热门的人机交互技术来实现功能,例如虚拟现实.动作捕捉.语音控制等.我们预计当该系统开发完毕后,它应该能够为 ...

学习java之路之第一周html

目录

初识HTML

前端基础

HTML的标准结构

常见的文本标签

标题标签

水平线标签（分割线）

段落标签

换行标签

文本格式化标签

引用标签

列表标签

滚动标签

块元素

原样输入标签

转义字符

图像标签

图像连接

超链接标签

表格标签

合并单元格

表单标签

表单提交get和post面试题

框架标签

CSS

常用的CSS选择器

CSS里面特殊的选择器(伪类选择器)

CSS中常用的样式属性

CSS文本样式

边框样式

学习java之路之第一周html相关推荐

最新文章

热门文章