HTML5学习笔记

（B站up主：狂神说Java）共19part

by:容东 2022/07/29

HTML（超文本标记语言）

W3C（万维网联盟）

标准：

结构化标准语言：html
表现标准语言：CSS
行为标准：JavaScript

注释``

ctrl+”/”

`<meta>`描述性标签

描述性标签，它用来描述网站的信息
一般用来做SEO
例：
<meta name=”descripition” content=”文本”

标题标签`<h1>`标题`</h1>`

共六级h1-h6（大到小）

段落标签`<p>`段落`</p>`

换行标签`<br/>`

这是一个：自闭合标签

水平线标签`<hr/>`

粗体标签`<strong>`粗体`</strong>`

斜体标签`<em>`斜体`em`

特殊符号`& ;`

空格： 
大于：>
小于：<
版权号：©

注：格式(特殊符号)：& ;

图像标签`<img src="" alt="">`

<img src="path" alt="text" title="text" width="x" height="y">
注解：
     src：图像地址（必填）
     	相对路径&绝对路径
     	../ 上一级目录
     alt：图像代替文字（必填）
     title：悬停文字
     width：宽度
     height：高度

链接标签`<a herf="">`文本`</a>`

<a href="path" target="目标窗口位置">文本或图像</a>
注解：
    href：链接路径、想跳转的页面（必填）
    target：链接窗口在哪打开
    	_self 自己窗口（本窗口）
    	_blank 新窗口

锚链接<a name="">``</a>``<a href="">``</a>

<a name="here"></a>
   用作标记,here为标记名
<a href="#here">点击跳转</a>
   在标记名前加井号，点击即可跳转到标记点"here"

功能链接`<a href="mailto:">`text`</a>`

邮箱跳转

<a href="mailto:123456@qq.com">点击跳转</a>

QQ跳转
1. 百度搜索QQ推广
2. 推广工具（tab栏）
3. 输入信息
4. 复制代码即可

块元素

无论内容多少，该元素独占一行（p、h1-h6……）

行内元素

内容撑开宽度，左右都是排在一行（a、strong、em……）

列表学习

有序列表（试卷、问答……）

<ol>
	<li>这是第一个</li>
	<li>这是第二个</li>
	<li>这是第三个</li>
	<li>这是第四个</li>
</ol>

无序列表（导航栏、侧边栏……）

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

自定义列表（公司网站底部）

<dl>
    <dt>表头</dt>
    
    <dd>内容</dd>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>
	注释：
    	dl:自定义列表标签
    	dt:列表名称
    	dd:列表内容

表格学习

注释：
- 表格：table
- 行：tr
- 列：td

标签：

<table border="1px">
    <tr>
    	<td>1列</td>
        <td>2列</td>
        <td>3列</td>
    </tr>
</table>

跨行：rowspan
跨列：colspan

视频和音频

注释：
- audio：音频
- video：视频
- image：图像
- resources：资源

视频标签:

<video src="../" controls autoplay></video>
    注释：
    	src:路径
    	controls:播放器
    	autoplay:自动播放

音频标签：

<audio src="../" controls autoplay></audio>
    注释：
    	Chrome浏览器需要添加:muted

页面结构

元素名	描述
header	头部
footer	脚部
section	主体
article	文章内容
aside	侧边栏
nav	导航栏

如何做好开发者？

(使用者)
(观察者)
(分析者)
(开发者)
(开发者)要考虑(使用者)感受

iframe内联框架

标签

<iframe src="path" name="mainFrame"></iframe>
    注释：
    	src:引用页面地址
    	name：框架标识名

width：宽
height：高

例子

<iframe src="" name="hello" frameborder="0" width="1000px" height="1000px"></iframe>
<a href="https://www.baidu.com" target="hello">使用内联框架跳转</a>
    注释：
    	此处iframe作为窗口，被跳转链接引用

form表单

标签

<form method="get" action="result.html">
    <p>姓名：
        <input type="text" name="username"/>
    </p>
</form>
	注释：
	method:规定如何发送表单数据，常用（get、post)
get:在url中可以看到信息，不安全、高效
post:比较安全，传输文件
	action:表示向何处发送表单数据

属性及说明

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素名称
value	表单的初始值，type和radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
checked	type为radio或checkbox时，指定按钮是否是被选中
maxlength	最长能写几个字符

类型验证

类型	属性
邮箱	type=”email”
URL	type=”url”
商品数量	type=”number”`<input type=”number” name=”num” max”100″ min=”0″ step=”1″/>

表单的应用

类型	属性
隐藏域	hidden
只读	readonly
禁用	disable
提示信息	placeholder
非空判断	required
正则表达式	pattern
增加鼠标可用性	你点我试试

其余表单组件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录注册</title>
</head>

<body>

  <h1>注册</h1>

  <!--表单form
action：表示向何处发送表单数据
    表单提交的位置，可以是网站，也可以是一个请求处理地址
method：规定如何发送表单数据
    有post,get提交方式，
        get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
        post方式提交：比较安全，传输大文件
-->
  <form action="1.我的第一个网页.html" method="get">

    <!--文本输入框：input type="text"
  value：默认初始值
  maxlength：最长能写几个字符
  size：文本框长度
  -->
    <p>名字：<input type="text" name="UserName" value="冬瓜" maxlength="8" size="30" readonly></p>

    <!--密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd" hidden></p>

    <!--单选框标签
  input type="radio
  value：单选框的值
  name：表示组-->
    <p>
      <input type="radio" value="boy" name="sex" disabled>男
      <input type="radio" value="girl" name="sex" checked>女
    </p>

    <!--多选框标签
  input type="checkbox"
  checked：选中
  -->
    <p>爱好
      <input type="checkbox" value="sleep" name="hobby">睡觉
      <input type="checkbox" value="code" name="hobby" checked>敲代码
      <input type="checkbox" value="chat" name="hobby">聊天
      <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--按钮
  input type="button"   普通按钮
  input type="image"    图像按钮
  input type="submit"   提交按钮
  input type="reset"    重置
  -->
    <p>按钮
      <input type="button" name="btnl" value="点击变长">
      <input type="image" src="../">
    </p>
    <p>
      <input type="submit">
      <input type="reset" value="清空表单">
    </p>

    <!--下拉框,列表框
    selected：选中-->
    <p>国家：
      <select name="列表名称">
        <option value="zg" >中国</option>
        <option value="mg">美国</option>
        <option value="rs" selected>瑞士</option>
        <option value="yd">印度</option>
      </select>
    </p>

    <!--文本域
    clos：行
    rows：列
    -->
    <p>反馈：
      <textarea name="textarea" clos="50" rows="10">文本内容</textarea>
    </p>

    <!--文件域
    input type="file" name=""-->
    <p>
      <input type="file" name="files">
      <input type="button" value="上传" name="upload">
    </p>

    <!--邮箱验证-->
    <p>邮箱：
      <input type="email" name="email">
    </p>
    <!--url验证-->
    <p>URL：
      <input type="url" name="url">
    </p>
    <!--数字验证-->
    <p>数字 ：
      <input type="number" name="num" max="100" min="0" step="1">
    </p>

    <!--滑块
    input type="range"-->
    <p>音量：
      <input type="range" name="voice" min="0" max="100" step="10">
    </p>

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

    <!--增强鼠标可用性-->
    <label for="mark">你点我试试</label>
    <input type="text" value="mark">

    <!--输入提示-->
    <p>名字：<input type="text" name="UserName" value="冬瓜" maxlength="8" size="30" placeholder="请输入用户名"></p>
    <!--非空判断-->
    <p>名字：<input type="text" name="UserName" value="冬瓜" maxlength="8" size="30" placeholder="请输入用户名"></p>
    <!--正则表达式-->
    <input type="text" name="diymail" pattern="^\d,$">

  </form>
</body>

</html>

总结：

目录	内容
网页的基本标签	标题标签、段落标签、换行标签、水平线标签、注释、特殊符号、
图像标签	img
超链接	锚链接、功能链接（QQ、邮箱）、超链接
行内元素与块元素	具体解析
列表	无序、有序、自定义列表
表格	行、列、跨行、跨列、表头
媒体元素	音频、视频
网页简单布局	头部、脚部、主体
内联框架	iframe
表单	form(post
表单应用	只读、隐藏域、禁用
表单的初级验证	用户提示placehoder、非空判断required、正则表达式parrent

本文链接：https://www.cnblogs.com/qingfengguihe/p/16475953.html

HTML5

HTML5学习笔记

HTML（超文本标记语言）

W3C（万维网联盟）

注释``

`<meta>`描述性标签

标题标签`<h1>`标题`</h1>`

段落标签`<p>`段落`</p>`

换行标签`<br/>`

水平线标签`<hr/>`

粗体标签`<strong>`粗体`</strong>`

斜体标签`<em>`斜体`em`

特殊符号`& ;`

图像标签`<img src="" alt="">`

链接标签`<a herf="">`文本`</a>`

锚链接<a name="">``</a>``<a href="">``</a>

功能链接`<a href="mailto:">`text`</a>`

块元素

行内元素

列表学习

表格学习

视频和音频

页面结构

如何做好开发者？

iframe内联框架

form表单

总结：

HTML5的更多相关文章

随机推荐

热门专题

目录导航

HTML5

HTML5学习 笔记

HTML（超文本标记语言）

W3C（万维网联盟）

注释

<meta>描述性标签

标题标签<h1>标题</h1>

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

换行标签<br/>

水平线标签<hr/>

粗体标签<strong>粗体</strong>

斜体标签<em>斜体em

特殊符号& ;

图像标签<img src="" alt="">

链接标签<a herf="">文本</a>

锚链接<a name="">``</a>``<a href="">``</a>

功能链接<a href="mailto:">text</a>

块元素

行内元素

列表学习

表格学习

视频和音频

页面结构

如何做好开发者？

iframe内联框架

form表单

总结：

HTML5的更多相关文章

随机推荐

热门专题

目录导航

HTML5学习笔记

注释``

`<meta>`描述性标签

标题标签`<h1>`标题`</h1>`

段落标签`<p>`段落`</p>`

换行标签`<br/>`

水平线标签`<hr/>`

粗体标签`<strong>`粗体`</strong>`

斜体标签`<em>`斜体`em`

特殊符号`& ;`

图像标签`<img src="" alt="">`

链接标签`<a herf="">`文本`</a>`

功能链接`<a href="mailto:">`text`</a>`