HTML

最新推荐文章于 2024-10-13 08:49:06 发布

qq_39165074

最新推荐文章于 2024-10-13 08:49:06 发布

阅读量133

点赞数

分类专栏： java 文章标签： html

本文链接：https://blog.csdn.net/qq_39165074/article/details/104263891

版权

java 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

HTML

一基础

1.1 什么是HTML

HTML: 超文本标记语言

超文本: 文字,图片视频,定位…

HTML的基本解构

所有的html 标签都以 <> 开始 </> 结尾
所有的网页内容都需要放在标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <!--自闭合标签-->
    <meta charset="UTF-8">
    <!--正常的标签都是需要成对出现的-->
    <title>Title</title>
</head>
<body>

</body>
</html>

DOCTYPE 文档类型, 默认声明: 表示这个浏览器网页使用什么规范,我们默认使用HTML
Title 标签网站的小标题名称;
meta 描述信息

<!--建议规范编码，统一使用UTF-8（全世界）   gb2312：包含了所有的中文字符-->    
<meta charset="UTF-8">
<!--网站关键字描述-->
<meta name="keywords" content="狂神说Java,秦疆">
<!--网站的描述-->
<meta name="description" content="学Java，听狂神说">

1.5 网站的基本标签

1、标题标签

<!--标题标签  h1 + tab键 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

3、换行标签

<br/>

4、水平线标签

<hr/>

5、字体样式标签

<!--斜体-->
 <em>斜体</em>
<!--加粗-->
<strong>加粗</strong>

6、特殊符号标签

<!--空格 &-->
<p>Java</p>
<p>Java              Java</p>
<p>Java &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Java</p>
<!--大于小于号-->
&gt;
&lt;
<!--版权符号-->
&copy; 版权所有：哇哈哈

<!--万能的公式  &  ;-->
&phone;

1.6 图像标签

图片为静态资源,单独放

statics\images

路径

相对路径   ../../
绝对路径   https://150.109.117.44:443/usr/themes/PureLoveForTypecho/images/banner2.jpg

源属性（Src）

src 指 “source”。源属性的值是图像的 URL 地址。

Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。

高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<img src="../static/images/1.jpg" alt="风景"  title="越南天堂岛"  width="500" height="500">
</body>
</html>

1.7 超链接

<!--
超链接：表示从一个地方跳转到另外一个地方  hao123导航

href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
    _self : 在自己的窗口打开
    _blank： 在新窗口中打开

和图片嵌套使用
-->

<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->

<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
    <img src="../statics/images/bd.png">
</a>

锚链接

用于页面间指定位置跳转：快速定位目录
可以在同一页页面中跳转
也可以在不同页面中跳转：（需要掌握）

锚点

<!--标记A-->
<a name="markerA">A</a>

跳转到锚点

<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a> <br>
<a href="2.基本结构.html#haha">E</a> <br>

功能性标签

邮件链接

<a href="mailto:24736743@qq.com">联系我们</a>

1.8块元素,行内元素

HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例:<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>

<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>

</body>
</html>

二列表,表格,媒体元素

2.1列表

无序列表

<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>Java</li>
</ul>

有序列表

<ol>
    <li>====</li>
    <li>====</li>
    <li>====</li>
    <li>====</li>
</ol>

自定义列表

<!--自定义列表
网站的底部，用于标记项
-->
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>梨子</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>梨子</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
</dl>

2.2表格

基本结构：

表格 table
行 tr 跨行 rowspan
列 td 跨列colspan

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<h4>单元格跨两列:</h4>
<table border="1">  如果不定义边框属性，表格将不显示边框
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

2.3 音频视频

音频 audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--音频播放-->
<audio src="../statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" autoplay controls>

</audio>

</body>
</html>

视频 video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频</title>
</head>
<body>

<!--video 视频标签
src：视频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay： 自动播放
loop: 循环播放

-->

<!--<video src="../statics/video/china.mp4" controls autoplay></video>-->

<video controls autoplay>
    <source src="../statics/video/china.mp4">
    <source src="../statics/video/china.mp4">
</video>


</body>
</html>

2.4网页结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--这些标签都是一些行业规范-->

<header>头部</header>

<nav>导航栏</nav>

<aside>侧边栏</aside>

<article>文章主题</article>

<section> 独立区域 </section>

<footer>
   尾部
</footer>

</body>
</html>

2.5 内联框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法:

<iframe src="URL"></iframe>

设置高度与宽度

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

移除边框

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

三表单

1、表单元素

表单使用表单标签来设置:

<form>
.
input 元素
.
</form>

文本框

<!--文本框 type="text"
value ：文本框默认的初始值
size： 文本框的长度
maxlength： 文本框的最大输入长度
-->
<p>
    <input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>

密码字段

<!--密码框 type="password"
size="20" 密码框的长度
-->
<p>
    <input type="password" name="pwd" size="20">
</p>

单选按钮

<!--单选框type="radio"
value： 表单提交的值
name： 名字相同，则自动分组，必须要分组
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="radio" 后增加单选框的属性
-->
<p>
    <input type="radio" value="男" name="sex" checked>男
    <input type="radio" value="女" name="sex">女
</p>

复选框

<!--多选框 type="checkbox"
name： 必填项，如果是分组，则名称一致
value： 表单提交的值
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="checkbox" 后增加多选框的属性
-->
<p>
    <input type="checkbox" name="hobby" value="code">敲代码
    <input type="checkbox" name="hobby" value="music" checked>听音乐
    <input type="checkbox" name="hobby" value="girl" disabled>女孩
</p>

下拉列表框 select-option

<!--下拉列表框
select
name： 组件名字 必填
size:  显示的数量，默认为1

option： 选项
value 必填
option标签中间写下拉框的值
selected： 默认选中

-->
<select name="科目">
    <option value="1"></option>
    <option value="2">数学</option>
    <option value="3" selected>英语</option>
    <option value="4">英语</option>
    <option value="5">英语</option>
</select>

按钮

<!--按钮
value：按钮上的文字
-->
<p>
    <!--提交-->
    <input type="submit" value="登录">
    <!--重置--使用-->
    <input type="reset" value="清空">
    <!--普通按钮：一般后来我们会和javascript结合使用，点击按钮xxx-->
    <input type="button" value="点我">
    <!--图片按钮
        type="image"
        src：图片的路径
    -->
    <input type="image" src="../statics/images/bd.png">
</p>

文本域

<!--文本域  cols  rows-->
<textarea name="textarea" cols="10" rows="10">
</textarea>

文件域

<!--
表单，需要支持提交复杂文件  enctype="multipart/form-data"
未来：文件上传会用到
-->
<form action="test.html" method="get" enctype="multipart/form-data">
    <input type="file" name="video">
</form>

邮箱

  <!--邮箱-->
    <p>
        邮箱：<input type="email" name="email">
    </p>

网址

   <!--url网址-->
    <p>
        url：<input type="url" name="url">
    </p>

数字

<!--数字：商品数量，计数  type="number"
最小值  min="0" 
最大值  max="100" 
步长    step="10"
-->
<p>
    数字：<input type="number" min="0" max="100" step="10">
</p>

滑块

<!--滑块
默认值0~100
-->
<p>
    <input type="range" name="range" min="0" max="1000" step="2">
</p>

搜索框（带关闭按钮）

   <!--搜索框-->
    <p>
       搜索： <input type="search" name="search">
    </p>

2 应用

隐藏域

  <!--隐藏域-->
    <p>
        <input type="hidden" name="count" value="10">
    </p>

只读和禁用

<p>
    用户名： <input type="text" name="username" readonly>
</p>

<p>
    密码： <input type="password" name="pwd" disabled>
</p>

标注

<p>
    <!--通过 for="name" 来链接到 表单中的指定ID -->
    <label for="name">用户名： </label>
    <input type="text" name="username"  id="name">
</p>

初级表单验证

减轻服务器压力

默认提示

<!--placeholder="必须是url格式" 默认提示，告诉用户应该这么做-->

必填

<p>
    <!--required必须要填写这个字段-->
    密码： <input type="password" name="pwd" required>
</p>

正则表达式

<p>
    <!--pattern:正则表达式-->
    手机号码： <input type="password" name="tel" required pattern="^1[358]\d{9}">
</p>

qq_39165074

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML

HTML

一 基础

1.1 什么是HTML

1.5 网站的基本标签

1、标题标签

3、换行标签

4、水平线标签

5、字体样式标签

6、 特殊符号标签

1.6 图像标签

源属性（Src）

Alt属性

高度与宽度

1.7 超链接

1.8块元素,行内元素

二 列表,表格,媒体元素

2.1列表

2.2表格

2.3 音频 视频

2.4网页结构

2.5 内联框架

三 表单

1、表单元素

2 应用

一基础

6、特殊符号标签

二列表,表格,媒体元素

2.3 音频视频

三表单