HTML5

1.概念

1.HTML全称Hyper Text Markup Language（超文本标记语言），超文本有文字，图片，动画，音频，视频等；

2.各种知名浏览器都对HTML5支持，天然跨平台；

3.W3C是万维网联盟，W3C标准有结构化标准语言（HTML,XML），表现标准语言（CSS），行为标准（DOM，ECMAScript）；

2.网页基本信息

1.HTML注解：<!-- ->，DOCTYPE表示规范，head表示网页头部，包含title（网页标题），meta（描述性标签，用于优化搜索引擎，类似视频下面的各种标签描述）。body表示网页的主体；

3.基本标签

1.网页主体基本标签：标题标签（双标签，h1…n，显示对应级数标题），段落标签（双标签，p，内容自成一段），换行标签（单标签，放结尾，br/，和Java换行符一样），水平线标签（单标签，放开头，hr，显示一条水平线），字体标签（双标签，strong为粗体，em为斜体），特殊符号（&+nbsp，gt，lt，copy+；通过&开头；结尾，中间分别表示空格，大于号，小于号，版权号）；

2.图像标签：<img src=”../相对路径或者绝对路径“ alt="图片找不到后显示的文本" title=”悬停文字“ width=”宽度“ height=”高度“ ...其他功能>；src和alt必填

3.链接标签：<a href="跳转的页面链接" target=”设置跳转窗口，默认当前窗口“>显示点击我跳转文本按钮，或者插入图像标签代替文体进行跳转按钮</a>，href必填；

4.锚链接：<a href="#加标记的标签名，一般用过顶部键使用">显示文本</a>，再在body下方写入<a name="标签名">显示文本，顶部</a>两者搭配就会形成跳回顶部的功能；

5.功能性链接之邮件链接：和锚链接一样，只是href里面的内容改为mailto:邮箱的格式。QQ链接直接百度QQ推广可以直接生成；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>个人练习</title><link  rel="stylesheet" href="../css/Css_1.css">
</head>
<body>
<div>
<!--标题1和2级-->
<h1 id="first_h">欢迎来到语文大课堂</h1>
<h2 class="h">咏鹅</h2>
</div>
<!--换行+黑体-->
<div>
<p id="first_e">鹅，鹅，鹅，曲项向天歌。</p>
<p id="second_e">白毛浮绿水，红掌拨清波。</p>
</div>
<div>
<!--超链接-->
<a href="../html/lie.html" target="_blank">
<!--    插入图片-->
<img src="../resouce/image/300.jpg" alt="这是一只鹅" title="白鹅" width="150" height="110">
</a>
</div><br/>
<!--qq推广-->
<div>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="加我发资源" title="加我发资源"/>
</a>
</div>
</body>
</html>

4.行内元素和块元素

1.块元素指该元素独占一行，如p，h。行内元素指内容的多少可改变宽度，左右都是行内元素可排成一行，如a，strong，em等；

5.列表标签

1.列表分为有序，无序，自定义三种；

2.有序：<ol><li>自带序号文本</li><li>自带序号文本</li>...</ol>，无序就是ol改为ul，自定义为<dl><dt>列表名称</dt><dd>内容</dd><dd>内容2</dd>...</dl> ；

6.表格标签

1.table标签就是表格标签，tr是行，td是列；

2.两行三列：<table><tr><td>1行1列内容</td>....</td></tr><tr><td>2行1列内容</td>...</tr></table>;

3.修改table格式可在<table>后添加方法；

4.一列占多行：td后面添加colspan=”占多少行“；

5.一行占多列：tr后面添加rowspan=”占多少列“；

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>行列练习</title><link rel="stylesheet" href="../css/Css_2.css">
</head>
<body>
<div id="ol1">
<ol><li>JAVAEE</li><li>HTML5</li><li>CSS3</li>
</ol>
</div>
<div>
<ul><li>Spring</li><li>SpringMVC</li><li>Mybatis</li>
</ul>
</div>
<div id="dl1">
<dl><dt>发展地</dt><dd>广州</dd><dd>新兴</dd><dd>云浮</dd>
</dl>
</div>
<div>
<table border="1px"><tr><td colspan="2">三冠马</td><td>无胜马</td></tr><tr><td>皇帝</td><td>东海帝皇</td><td>乌拉拉</td></tr>
</table>
</div>
<a href="From_Text.html" target="_blank">东海帝皇三连冠</a>
</div>
</body>
</html>

7.媒体元素

1.视频元素：<video src="路径" controls（控制播放，默认是没有该权限，没有设置不显示视频） autoplay（自动播放）...></video>；

2.音频元素：<audio></audio>，和video一样的方法；

8.页面结构分析

1.一个网页包含以下元素：header（标记头部区域内容），footer（标记脚步区域内容），section（页面中一块独立区域），article（独立的文章内容），aside（相关内容或应用），nav（导航类辅助内容），以上都在body标签内；

9.iframe内联框架

1.通俗来讲就是套娃，网页里面嵌入一个网页，<iframe src="网页地址" name=”框架标识名“=></iframe>，标识码可配合链接标签使用；

<iframe src="https://www.bilibili.com/" name="bilibili" width="500px" height="200px"></iframe>

10.表单

1.表单（form）即为各种网页登录的那个界面；

2.属性有action（表单数据提交位置），method（提交方式：post/安全，可传输大文件，get/高效但不安全）；

3.表单通常搭配输入标签使用；

11.输入标签

1.input为单标签输入，input的type十分强大，存放各种控件类型。属性type为password时输入为星号，为submit是提交，为text是文本等等，属性value为默认值，文本框初始值，size为长度；

2.属性type为radio时为单选按钮，但要设置name属性一致才可实现单选，不然不是同一组按钮；

3.属性tpye为checkbox为多选框，同样需要设置name才为一组；

4.type为reset为重置功能，清空表单，为image为图像提交按钮；

5.type为file即为选择本地文件；

6.value为提交的数据，标签后的内容为显示内容；

7.属性hidden：隐藏元素，readonly：只读， disabled：不可选；

12.下拉标签

1.下拉框select，为双标签，属性selected为默认初始选项；

13.文本域

1.双标签，textarea，属性cols为列，rows为行；

14.增强鼠标可用性

1.label标签，通过属性for可实现点击文本也能将鼠标移动到for内的文本框，for内填入input标签的id属性；

15.表单初级验证

1.作用主要为减轻服务器验证压力和提高安全性；

2.input属性placeholder：提示词，required：非空判断，pattern：正则表达式判断；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单练习</title>
</head>
<body>
<form action="hello.html" method="post"><p><label for="user">用户名</label><input type="text" placeholder="请输入用户名" required id="user"></p><p>密码<input type="password" placeholder="请输入密码" required></p><p>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女</p><select hidden></select></p><p>爱好：<input type="checkbox" name="like">打篮球<input type="checkbox" name="like">打游戏<input type="checkbox"name="like">打人</p><p>喜欢的游戏：<select name="game" ><option value="fgo">fgo</option><option value="blhx" selected>碧蓝航线</option><option value="mrfz">明日方舟</option><option value="gzlj">公主链接</option></select></p><p>评论区</p><textarea cols="3" rows="5"></textarea><br><p><input type="submit" value="注册"></p></form></body>
</html>

CSS3

1.概述

1.Cascading Style Sheet：层叠级联样式表，用于美化网页为主；

2.style

1.style写在head里，可用于美化，如美化标题则在style内写入你要美化的标题标签，如h1{color:red（标题字体修改为红）}；

2.通常直接通过html的link标签直接引用写好的css样式来美化网页；

3.四种CSS导入方式

1.行内样式：直接在标签内创建style元素；

2.内部样式：在头部创建style并在style内写入要美化的对象；

3.外部样式：通过link调用css；

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

4.三种方式的美化采用就近原则，谁离美化的对象近就最终呈现谁的效果，一般都是行内样式最近；

4.三种基本选择器

1.标签选择器：上述的就是标签选择器，通过标签美化，但缺点是选择的标签会全部进行渲染美化；

div{text-align: center;
}

2.类选择器：在标签后面添加一个class=“类名”，然后在style中.类名即可单独渲染美化多个同类标签的一个；

.h{color: #eec00f;
}

3.id选择器：和类基本一样，在标签添加id属性，然后到style#id名即可，注意id要全局唯一；

#first_h{color: #c73ac7;
}

4.渲染级别：id>类>标签；

5.层次选择器

1.后代选择器：在style里选中的标签前面加上body+空格，即可把该标签和该标签嵌入的标签都渲染；

2.子选择器：同样在前面加东西，但是变为body+>，可把该标签进行渲染，嵌入的同类标签不渲染；

3.相怜选择器：点号+选择标签的类名+加号+标签使用，渲染该标签的下一个同类标签，嵌入的同类标签不渲染；

4.通用选择器：点号+选择标签的类名+波浪号+标签使用，渲染该标签的下面同类标签，嵌入的同类标签不渲染；

6.结构伪类选择器

1.比如列表标签这种有结构的，例如无序的可以在style里写入 ul li:first-child{}，该代码表示渲染ul列表的第一个子元素，first改为last即为最后一个；

2.若是像p这种段落标签可通过父类进行定位，p:nth-child(1){}，表示选择p的父类的第一个子元素，且为p才生效，可通过将child改为of-type(1)进行选择，该方法为选择p父类第一个为p的子元素；

3.带冒号即为伪类的意思；

7.属性选择器（常用）

1.同样一个正式的页面的标签都是带有各种各样的属性的，属性选择器就是通过属性来选择要渲染的标签；

2.比如渲染带id属性的a标签：a[id]{渲染代码}，也可以具体到id的值，只需改为id=值（可用正则）；

3.一些常用的正则：*=value（包含这个值），^=value（value值开头），$=value（value值结尾）；

8.字体样式

1.span标签，为双标签，用于突出显示，把想要突出的文本套上span标签，在style中渲染；

2.渲染方法font-family：字体类型；

3.渲染方法font-size：字体大小；

4.渲染方法font-weight：字体粗细；

5.一般以上font方法都会进行整合，直接font：字体风格字体粗细字体大小字体类型；

p{color: #47aaaa;font-family: "Adobe 宋体 Std L";font-size: small;font-weight: bold;
}

9.文本样式

1.color：颜色；

2.text-align：排版方向，center为居中；

3.text-indent：2em（段落首行缩进2）；

4.line-height：行高（行高和块区域高度一致可上下居中）；

5.text-decoration：设置上中下划线，关键词line，为none消除下划线；

6.a，p{vertical-align：middle}，p水平居中a；

10.超链接伪类

1.标签：hover{}，鼠标悬停颜色，active为鼠标未释放颜色；

.h:hover{color: white;
}

11.背景

1.background：颜色，图片，图片位置，显示方式（默认平铺）；

12.盒子模型

1.右键网页点击检查，会弹出html码和css码，css码里有个嵌套的正方形就是盒子模型，代码中用div空标签包裹住；

2.margin为外边距，border为边框，padding为内边距；

3.渲染代码border：粗细，样式，颜色；

4.很多标签都存在默认外边距值，body默认8；

5.margin/padding：0为上下左右都为0，有2个参数的情况第一个表示上下，第二个左右，有4个参数就上下左右；

div{background-color: #1fe092;color: white;text-align: center;margin: 0;border-radius: 10px;
}

从零开始的Java再学习-DAY10相关推荐

考研二战失败我的从零开始Java入门学习（十）
文章目录一.集合 1.Collection集合类 1.1 Collection集合类方法 1.2 Collection的子类 2.Map集合类 2.1 Map集合类方法 2.2 Map类的子类 3. ...
黑马程序员__关于自己的一些学习死角的再学习（基于老毕的java基础视频）
----------------------<ahref="http://edu.csdn.net"target="blank">ASP.Net+A ...
termite:从零开始的go语言学习生活
时隔一年.终于下定决心认真的学习一下golang,为此昨天纠结了好久要不要买一个正版的goland,最后还是没舍得买-为什么要学习go呢?如今在当前这家公司已经工作两年,悠哉的生活使我日日堕落-体重长 ...
Observability：从零开始创建 Java 微服务并监控它（一）
在本教程中,你将学习如何使用 Elastic 可观察性监控 Java 应用程序:日志.基础设施指标.APM 和正常运行时间.通过本教程,你将学到: 创建示例 Java 应用程序. 使用 Filebea ...
44从零开始学Java之详解容易让初学者懵圈的abstract抽象类、抽象方法
作者:孙玉昌,昵称[一一哥],另外[壹壹哥]也是我哦千锋教育高级教研员.CSDN博客专家.万粉博主.阿里云专家博主.掘金优质作者前言经过前面几篇文章的讲解,我们现在已经对面向对象有了基本的认知, ...
【Java】学习笔记2——从小白到入门（技术提升篇）
写在前面 [Java]学习笔记1--从小小白到小白 (基础知识篇)里记录了Java中最最基础的知识,在对基础知识有了基本了解之后,就可以开始着手技术提升了.本篇博客也将延续第一篇,继续记录我的Java ...
Java EE学习心得
–Java EE学习心得 1. 称为编程专家的秘诀是: 思考-----编程--------思考------编程--.. 编程不能一步到位,不能一上来就编,必须先思考如何写,怎样写?然后再编程 ...
JAVE EE 企业级开发之从零开始学JAVA【51CTO技术论坛】
http://bbs.51cto.com JAVE EE 企业级开发之从零开始学JAVA 从零开始学JAVA?YES!本刊内容全部为午饭redking整理.撰写,所涉及内容均为原创,非 ...
初级java开发学习路线_成为初级全栈Web开发人员的10分钟路线图
初级java开发学习路线 So you have started your journey into the world of web development. But what do you lea ...

从零开始的Java再学习-DAY10