走进HTML

最新推荐文章于 2024-04-24 12:00:00 发布

好好学java的xz

最新推荐文章于 2024-04-24 12:00:00 发布

阅读量300

点赞数

文章标签： html html5 爬虫

本文链接：https://blog.csdn.net/m0_51945098/article/details/120389098

版权

HTML
在这里插入图片描述
HTML —》 Hyper Text Markup Language(超文本标记语言)
超文本就是可以放视频和音乐，可扩展。
html一把在谷歌Google friebox火狐上展示。
f12 改页面端改的是客户端服务器端不会变

元素介绍：
元素，控制台，源码，网络
Elements Console Sources Network

知识点：
java基础+高级+数据库+前端(静态网页)-专业前端
+动态网页(JSP)-java程序员专用的。

前端(静态网页)： HTML,CSS,JS,JQUERY
vue 一套构建用户界面的渐进式框架，后期学，学了以后更方便。

前期使用HBuilder软件（公司没人用），后期Visual Studio Code

HTML基本结构：

<html>
<head>
	<title>我的第一个网页</title>
</head>

<!-- 注意点： 
 - 两个head之间就是网页头部 
 - 两个body之间就是主体部分
-->

<body>
	我的第一个网页
</body>
</html>

注意点：
<body></body>等成对的标签，分别叫开始标签和结束标签
单独呈现的标签（空元素），如<hr/>；意思=为用/来关闭空元素

有/无语义区别
有语义的含义都是老外自定义的，就有渲染效果。
没有语义的比如我们自定义的 <abc></abc> 和不加是一样的效果。

HTML和XML的区别

XML传数据是动态的，HTML渲染数据是静态的
HTML是超文本标记语言，XML是可扩展标记语言
java JDK环境支持 xml 不支持html
java web项目可以创建 html 文件（有web）和java文件

整理格式快捷键： CTRL + SHIFT + F
以下所有的标签都是在body里
网页的基本标签：

网页的标题标签：

<h1>…</h1>（一级标题）
…
<h6>…</h6>（六级标题）
h1 - h6 没有h7
h1最大，h6最小

段落标签：<p>…</p>

<p>渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p>劝君更尽一杯酒，西出阳关无故人。</p>

结果为：
渭城朝雨浥轻尘，客舍青青柳色新。
劝君更尽一杯酒，西出阳关无故人。

换行标签：<br/>

劝君更尽一杯酒，<br/>西出阳关无故人。

结果为：
劝君更尽一杯酒，
西出阳关无故人。

水平线：<hr/>

渭城朝雨浥轻尘，客舍青青柳色新。<hr/>
劝君更尽一杯酒，西出阳关无故人。

结果为：
渭城朝雨浥轻尘，客舍青青柳色新。
----------------------------------------中间一条横线
劝君更尽一杯酒，西出阳关无故人。

字体样式标签：
加粗：<strong>…</strong>
斜体：<em>…</em>

注释和特殊符号：
特殊符号字符实体
空格： 

大于号（>）：>

小于号（<）：<

引号（“）："
==》W3C规范中，HTML的属性值必须用成对的“”引起来

版权符号@ ：©

有些符号不是靠字符串生敲出来的，
而是特定的符号通过浏览器渲染出来的。

图像标签
常见的图像格式：
JPG、GIF、PNG、BMP

在同级目录创建一个img文件夹，存放东西。

<body>
<img src = "img/a.PNG"/>==》JPG也可以
</body>

<img src = "path"  alt = "图片加载中..." 
title = "图片获取中" width = "x(px)" height = "y(px)"/>
 <!--      src 图像地址               alt 图像的替代文字      -->
 <!-- title 鼠标悬停提示文字  width 图像宽度   height 图像高度 -->

alt的特点：
alt的话如果图片名字错误或者其他原因网络卡等等等等出不来
alt里的内容会去替代但如果成功图片是出来了那么就没有这句话。

前端入门
比如建房子
html 布局 =》毛坯房
css 样式 =》装修（精装修）
js 动态脚本 =》房子有各种各样的动态元素如电梯楼梯窗。
如网页的弹窗一个字扩展

jsp和上面的无关

什么是Java Server Pages?
JSP全称Java Server Pages，是一种动态网页开发技术。

JSP（HTML + JSP指令）

链接标签：

<a href="path" target="_self">xxxxx（链接文本或图像）</a>

href里填的是链接路径
target里是链接在哪个窗口打开，常用值：_self、_blank
意思是是否需要跳转窗口
_self和不写没啥区别，不会有新窗口，而 _blank会。

超链接里面可以套一个img标签。

常用超链接
页面间链接
从一个页面链接到另外一个页面

锚链接
从A页面的甲位置跳转到本页中的乙位置
从A页面的甲位置跳转到B页面中的乙位置
创建步骤

创建跳转标记

<a name = “marker”>乙位置</a>

2.创建跳转链接

<a href = “#marker”>甲位置</a>

注意： marker名字要一样，#不能忘了。

功能性链接
电子邮件（邮件链接）、QQ、MSN
举例：<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

列表
ul 是无序列表

<ul></ul>

li*4  tab 键   <li></li>

<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

ol 是有序列表

<ol></ol>

上面没有任何关系，下面是分等级的。

dl 是自定义列表
HTML不能展示，所以需要自定义
dt dd父子之间的关系

<dl>
	<dt></dt><!-- 这是品种 -->
	<dd></dd><!-- 这是具体物品 -->
	<dd></dd>
	<dt></dt>
	<dd></dd>
	<dd></dd>
</dl>

表格：
一个一个的单元格外面是table,所以有两条线。
表头用th 可以加粗
剩下的用td border = 1边框为1像素

cellpadding 属性规定单元边沿与其内容之间的空白。
cellspacing 属性规定单元格之间的空间。

<table border="1px" cellpadding="0" cellspacing="0" 
width="250px" height="100px">
			<tr>
				<th>姓名</th>
				<th>学号</th>
				<th>地址</th>
				<th>出生日期</th>
			</tr>
			<tr>
				<td>新竹</td>
				<td>123</td>
				<td>南京</td>
				<td>1995-03-06</td>
			</tr>
			<tr>
				<td>林夕</td>
				<td>124</td>
				<td>北京</td>
				<td>1997-01-01</td>
			</tr>
		</table>

跨列： td中属性 colspan 举例：<td colspan="2">林夕</td> 横着的
跨行： td中属性rowspan 举例：<td rowspan="2">a</td> 竖着的
以上两种，当使用跨行，要先删掉一行，
当使用跨列，也是一样，先删掉一列。

3.媒体元素
1.video播放视频

<video src="video/video.webm" controls="controls"></video>

path(地址)： 文件夹/名字

controls=“controls” 和 controls 一样
注意点：

controls 不是必须的，具体看浏览器和相关版本
有的可以自动播放有的浏览器支持mp4 有的支持webm
有的视频可以快进，有的不可以，具体看浏览器

题外话：
source 只要有一个满足，后面就不会执行了
为了兼容，写一堆代码，哪个浏览器可用就用哪个。
举例：

<video controls>
	<source src="video/video.webm"></source>
	<source src="video/video.mp4"></source>
</video>

假设如果mp4放在第一位，浏览器可以识别出来，
但会出现识别不了图像，可以有声音。
解决方法就是换个浏览器，换代码不太好。

2.video自动播放视频（已经被替代了，不用了）

<video autoplay>
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
    你的浏览器不支持video元素
</video>

3.audio 音乐播放

<audio controls="controls">
		<source src="music/music.mp3" type="audio/mp3"></source>
		<source src="music/music.ogg" type="audio/ogg"></source>
</audio>

type标签是一种类型。

题外话：
html是弱语言标签不写结束也能执行
不按照w3c标准也可以但很多情况不具备兼容性。
js也是弱语言，比HTML还弱。
很多客户端语言都是弱语言

html xml 的其中之一区别
xml不能放图片视频音乐不是超文本

4.结构元素

<header><h2>网页头部</h2></header>
<section><h2>网页主体部分</h2></section>
<footer><h2>网页底部</h2></footer>

5.<iframe>内联框架
iframe框架
（很少用，被淘汰了）性能也特低
嵌套一个布局

<iframe src="demo02.html" width="200 px" height="200 px"></iframe>

以前的前端： 无数个html组成效率低
近现代的前端： 一个html+无数个js

iframe常用属性

<h1>上方导航条</h1>
	<p><a href="subframe/the_first.html" target="mainFrame">
		下边显示第一页</a><br /><br />
	<a href="subframe/the_second.html" target="mainFrame">
		下边显示第二页</a><br /><br />
	<a href="subframe/the_third.html" target="mainFrame">
		下边显示第三页</a><br />
	</p>
	<iframe name="mainFrame" width="800px" height="150px"  src="subframe/the_second.html" />

创建三个html 分别写第x个页面内容
在这里插入图片描述
使用内联框架<iframe> 去掉边框

<iframe name="file_frame" src="UploadFile.jsp" frameborder=no  
border=0  marginwidth=0  marginheight=0  scrolling=no></iframe>

表单（很重要）
1.常用表单

表单在网页中的应用： 在网页中的登录、注册

表单语法：

<form method="post" action="result.html">

method=”post”

规定如何发送表单数据常用值：get|post

action=”result.html”

表示向何处发送表单数据

表单元素格式：（都在form标签里面）
相关属性：
type: 指定元素的类型。text、password、checkbox、radio、submit、
reset、file、hidden、image和button，默认为text。
name： 指定表单元素的名称。
value： 元素的初始值（默认值）。type为radio时必须指定一个值。
size： 指定表单元素的初始宽度。当type为text或password时，
表单元素的大小以字符为单位。对于其他类型，宽度为像素为单位。
maxlength： type为text或password时，输入的最大字符数。
checked： type为radio或checkbox时，指定按钮是否是被选中。

举例：

<input type ="text" name="frame" value ="text"/>

在这里插入图片描述

text==》input元素类型 frame==》input元素名称 text==》input元素的值

文本框里的东西传递给后台Java服务器
Java服务器需要通过name属性（值可以取个有意义的）
假设是keyword，后端通过keyword获取对应的value值。

name这个属性前端体现不了看不到后端用的
name 对于后端很重要不能少通过name属性得到value值

input元素类型：

不一定要写form,可以单独input

1.文本框—text

<input type="text" name="keyword" value="asdf" /> <br />

2.密码框—password

<input type="password" name="pwd" /><br />

在这里插入图片描述
3.单选按钮—radio
name要保持一致，不然后台获取不到
通过name属性获取value值1或2
value值是后台看的男和女是前端看的

<input type="radio" name="sex" value="1"/>男<br />
<input type="radio" name="sex" value="2"/>女<br />

在这里插入图片描述
4.复选框—checkbox

<input type="checkbox" name="love" value="1"/>苹果<br />
<input type="checkbox" name="love" value="2"/>菠萝<br />
<input type="checkbox" name="love" value="3"/>哈密瓜<br />
<input type="checkbox" name="love" value="4"/>水蜜桃<br />

在这里插入图片描述
对应的设置默认值：
checked=”checked”(单选按钮和复选框)基本都是这个。
selected=”selected”（列表框里的option里的）这个是特殊的。
可以简写就checked和selected。

5.列表框—select、option

<select name="city">
	<option value="1">南京</option>
	<option value="2">北京</option>
	<option value="3">广州</option>
	<option value="4">深圳</option>
</select>

在这里插入图片描述
6.按钮—reset、submit、button

<input type="reset" value="重置" /> 

<input type="submit" value="提交" />
<!-- 与form里的action和method相联系的 -->

<input type="button" value="提交2" 
onclick="window.location.href='demo02.html'" />

在这里插入图片描述
onclick: 给某个元素添加一个事件

onclick当中的值就是我们的事件。onclick是js里的。

通过我们当前的窗口调用属性location，
并且这个属性里有个跳转的属性叫超链接href，
然后链接到某个页面，所以只要促发这个按钮，就会跳转到某个页面。

注意点：

未来的趋势用button，现在都是用submit
submit后端可以直接获取，
而这个button必须要通过onclick来获取
两个不能等价，不同的应用场景

7.多行文本域—textarea
宽度和长度不同的浏览器可能会不一样数据不统一

<textarea rows="5" cols="20" name="self-Introduction">
</textarea><br />

rows行数 cols 宽度

8.文件域—file

<input type="file" name="photo" accept=”image/gif”/><br />

accept=”image/gif” 不写就是可以选择所有类型的文件。

在这里插入图片描述
让后台获取必须要加name去交互除了按钮。
前端其实不需要name给后台用的。

2.表单高级应用
隐藏域

<form action="demo02.html" method="get">
	<input type="hidden" value="1" name="id" />
	<input type="text" value="请输入用户名称" name="zs" /><br />
	<input type="password" name="pwd" /><br />
	<input type="submit" value="登录" />
</form>

在这里插入图片描述
结果： id被隐藏了！

只读

不能改的意思

<input type="text" value="男" readonly="readonly" />

readonly="readonly"可以只写readonly

禁用

<input type="text" value="男" disabled="disabled"/>

在这里插入图片描述
只读和禁用区别：
只读有些情况可以修改禁用完全不能修改
表单元素的标注

HTML注释：  标签

3.表单初级验证
placeholder（不是很常见一般用js不用html）

<input type="text" placeholder="请输入要搜索的关键字" />

在这里插入图片描述

placeholder 属性提供可描述输入字段预期值的提示信息。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

required(不是重点) 用js

<input type="text"  required="required"/>
			<input type="submit"  value="提交" />

在这里插入图片描述

parttern 也是用js

<input type="text" pattern="[A-z]{3}" />

只能是A到z 3位

<input type="submit" value="提交" />

在这里插入图片描述

js是动态脚本的 html是静态布局的
有时候html可以做动态的，但不专业，所以不好

题外话： （摘录）

html dl dt dd标签元素语法结构与使用
html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，
此组合标签我们也又叫表格标签，与table表格类似组合标签。

dt会比dd多出前面一段。

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>

HTML中<title>与<h1>区别
<title>标签表示的标题是整个网页的名字，是写给搜索引擎看的，
即在浏览器顶部的tab栏里显示的。搜索引擎通过它来搜索网页；
<title>标签里的文本不出现在页面内容里面，写在<head>里面。

<h1>标签是网页内容的标题，是网页内容的一部分，是给用户看的，
就相当于是网页中某篇文章或某段文字的标题，写在<body>里面。

----2021.09.15&16&17&18

好好学java的xz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
走进HTML

HTMLHTML —》 Hyper Text Markup Language(超文本标记语言)超文本就是可以放视频和音乐，可扩展。html一把在谷歌Google friebox火狐上展示。f12 改页面端改的是客户端服务器端不会变元素介绍：元素，控制台，源码，网络Elements Console Sources Network知识点：java基础+高级+数据库+前端(静态网页)-专业前端+动态网页(JSP)-java程序员专用的。**前端(静态网页)：**HTML,CSS,JS
复制链接

扫一扫

走进HTML

“相关推荐”对你有帮助么？