HTML（狂神说）

最新推荐文章于 2024-08-13 10:40:16 发布

*子衿*

最新推荐文章于 2024-08-13 10:40:16 发布

阅读量16

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_70296284/article/details/134127497

版权

HTML：Hyper Text Markup Language(超文本标记语言)

W3C:World Wide Web Consortium(万维网联盟)

W3C标准：

结构化标准语言（HTML）
表现标准语言（CSS）
行为标准（JavaScript）

1. 网页基本信息

 <!--DOCTYPE:文本声明，告诉浏览器，使用什么规范 -->
 <!DOCTYPE html>
 <!--指定html语言种类-->
 <!--en：英语 zh-CN：中文-->
 <html lang="en">
 <!--head标签代表网易头部-->
 <head>
 <!--meta描述性标签，用来描述网站的一些信息-->
 <!--charset:字符集-->
     <meta charset="UTF-8">
     <meta name="keywords" content="狂神说Java">
     <meta name="description" content="来这里学Java的">
 <!-- title标签代表网页标题-->
     <title>Title</title>
 </head>
 <!--body标签代表网页主体-->
 <body>
     Hello，World
 </body>
 </html>

2.网页基本标签

1.标题标签	<h1>一级标题</h1>
	......
	<h6>六级标题</h6>
2.段落标签	<p></p>
3.水平线标签	<hr/>
4.换行标签
5.粗体标签	<strong></strong>
6.斜体标签	<em></em>
7.空格
8.大于号	>
9.小于号	<

3.图像标签

 //图片标签：<img src="">
 <img src="" alt=“” title=“” width="" height="">

img属性：

src:图片的相对/绝对路径
alt:图片名(图片加载不出来时显示的文字)
title:悬停文字
width与height：宽度与高度(单位为px)

4.链接标签

 //链接标签<a></a>
 <a href="path" target="目标窗口打开位置">链接文本或图像</a>

a属性：

href：链接路径
target常用值
- _self:当前窗口打开
- blank：新窗口打开

超链接：

页面间链接：从一个页面连接到另一个页面，href取值为另一个页面的路径
锚链接：
1. 需要一个标记(name)
2. 跳转到标记处，href取值为#标记的name

 //标记
 <a name="top">顶部</a>
 
 
 
 
 
 //跳转到标记处
 <a href="#top" >回到顶部</a>

5.行内元素和块元素

块元素
- 独占一行
- （p,h1,h6,......）
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a,strong,em...）

6. 列表

无序列表:

 <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
 </ul>

有序列表

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

自定义列表

 <!--
 dl:标签
 dt:列表名称
 dd:列表内容
 -->
 <dl>
     <dt>学科</dt>
     
     <dd>C++</dd>
     <dd>Java</dd>
     <dd>Python</dd>
     
     <dt>位置</dt>
     
     <dd>北京</dd>
     <dd>上海</dd>
     <dd>广州</dd>
 </dl>

7.表格

表格：table

行：tr

列：td

table的属性：

border:边框线宽度，单位px

td的属性

colspan：跨列
rowspan：跨行

 <table border="1px">
     <tr>
         <！--colspan：跨列-->
         <td colspan=“3”>1-1</td>
     </tr>
     
      <tr>
          <！--rowspan：跨行-->
         <td rowspan="2">2-1</td>
         <td>2-2</td>
         <td>2-3</td>
     </tr>
     
      <tr>
         <td>3-2</td>
         <td>3-3</td>
     </tr>
 </table>

8.视频和音频

视频：<video></video>

音频：<audio></audio>

视频和音频的属性：

src：指定资源路径
controls：播放组件
autoplay：自动播放

 <video src="资源路径" controls autoplay></video>
 <audio src="资源路径" controls autoplay> </audio>

9.页面结构分析

10.iframe内联框架

网页中嵌入另外一个网页

 //<iframe src="path" name="mainFrame"></iframe>
 <iframe src="https://www.bilibili.com/" frameborder="0"
 width="1000px" height="800px"></iframe>

src:路径

name：框架标识名

11.表单

11.1表单语法：

form属性：

method：提交表单的方式
action：表单数据上交的位置

method="get"

method="post"

表单元素格式：

为了显示提交的数据，表单中标签一般都要设置name属性的值。

11.2表单中的组件

主要组件：

 <h1>注册</h1>
 <!--
 action:表单提交位置
 method：post，get方式
         get提交方式：可以在url中看到提交的信息，高效，不安全
         post提交方式：比较安全，传输大文件
 -->
 <form action="1.我的第一个网页.html" method="get">
 
   <!--  文本框 input type="text"-->
   <p>名字：<input type="text" name="username"></p>
   <!--  密码框 input type="password"-->
   <p>密码：<input type="password" name="pwd"></p>
 
 <!--  单选框：input type="radio"
 value：单选框的值
 name：组名(同一组的单选框才能实现单选功能)
 -->
   <p>性别：
     <input type="radio" value="boy" name="gender" checked>男
     <input type="radio" value="girl" name="gender">女
   </p>
 
 <!--多选框： input type="checkboox"-->
   <p>爱好：
     <input type="checkbox" value="sleep" name="hobby" checked>睡觉
     <input type="checkbox" value="code" name="hobby">敲代码
     <input type="checkbox" value="reading" name="hobby">阅读
   </p>
 
   <!--按钮：input type="button"-->
   <!--图片按钮：input type="image"-->
   <!--提交按钮：input type="submit"-->
   <!--重置按钮：input type="reset"-->
   <p>按钮：
     <input type="button" name="btn1" value="点击变长">
     <input type="image" src="">
   </p>
 
 <!--下拉框：select
    下拉选项：option
 -->
 <p>国家：
   <select name="Country">
     <option value="China">中国</option>
     <option value="USA">美国</option>
     <option value="瑞士" selected>瑞士</option>
   </select>
 </p>
 <!--文本域:textarea-->
 <p>反馈：
   <textarea name="textarea" cols="30" rows="5">文本内容</textarea>
 </p>
 
 <!--文件域：input type="file" name="files"-->
   <p>
     <input type="file" name="files">
     <input type="button" value="上传" name="upload">
   </p>
   <p>
     <input type="submit">
     <input type="reset">
   </p>
 </form>
 </body>
 </html>

其他的一些表单组件(了解即可)：

  </p>
 <!--邮件验证:input type="email"-->
   <p>邮箱：
     <input type="email" name="email">
   </p>
 <!--URL验证:input type="url"-->
   <p>URL：
     <input type="url" name="url">
   </p>
 <!--数字验证:input type="number"-->
   <p>数字：
     <input type="number" name="number" max="100" min="=1" step="1">
   </p>
 <!--滑块:input type="range"-->
 <p>音量：
   <input type="range" name="voice" max="100" min="0" step="5">
 </p>
 <!--搜索框：input type="search"-->
 <p>搜索：
   <input type="search" name="search">
 </p>

label标签：

 <!--label标签增强鼠标可用性-->
   <p>
     <label> <input type="checkbox">点我可以选中前面的复选框</label>
   </p>

表单组件的一些属性：

readonly：只读

disabled：禁用(按钮)

hidden：隐藏(组件) 用隐藏域可以提交一些默认值

11.3表单初级验证

常用方式：

表单组件的一些属性：

placeholder：提示信息(鼠标悬停在输入框时，显示提示信息)

required：非空判断（内容必须非空，否则无法提交表单）

pattern：正则表达式

*子衿*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML（狂神说）

HTML：Hyper Text Markup Language(超文本标记语言)W3C:World Wide Web Consortium(万维网联盟)W3C标准：结构化标准语言（HTML）表现标准语言（CSS）行为标准（JavaScript）
复制链接

扫一扫