从零开始的Java再学习-DAY10

最新推荐文章于 2024-11-08 10:30:00 发布

小白小白小

最新推荐文章于 2024-11-08 10:30:00 发布

阅读量252

点赞数

文章标签： html css html5 web

本文链接：https://blog.csdn.net/qq_41402692/article/details/114729597

版权

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;
}