HTML详细笔记

HTML详细笔记

初始HTML

什么是HTML

HTML

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

超文本包括:文字、图片、音频、视频、动画等。

HTML发展史

HTML详细笔记

HTML5,提供了ー些新的元素和一些有趣的新特性,同时也建立了ー些新的拠则。这些元素、特性和规则的建立,提供了许多新的网页功能,如使用网页实现动态渲染图形、图表、图像和动画,以及不需要安装任何插件直接使用网页播放视频等。

HTML5的优势

  • 世界知名浏览器厂商对HTML5的支持
    • 微软
    • Google
    • 苹果
    • Opera
    • Mozilla
  • 市场的需求
  • 跨平台

网页基本信息

DOCTYPE声明

<!--DOCTYPE:告诉浏览器,我们使用什么规范 -->
<!DOCTYPE html>
<!DOCTYPE html>
<!--html:超文本的开始和结束-->
<html lang="en">
    <!--head:超文本头部信息的开始和结束-->
    <head>
        <!--meta:用来描述HTML文档的元信息,即文档自身的信息-->
        <meta charset="UTF-8">
        
        <!--title:超文本创口标题的开始和结束,它被显示在浏览器的标题栏中-->
        <title>Title</title>
    </head>
<!--body:网页主体部分,是HTML语言的核心部分-->
    <body>

    </body>
</html>

<meta> 标签

属性 描述
charset character_set 定义文档的字符编码。
content text 定义与 http-equiv 或 name 属性相关的元信息。
http-equiv content-type default-style refresh 把 content 属性关联到 HTTP 头部。
name application-name author description generator* *keywords 把 content 属性关联到一个名称。
<meta name="参数" content="参数值" >
<meta name="keywords" content="程序员,程序猿,攻城狮">
<meta name="description" content="meta标签是HTML中的一个重要标签,它位于HTML文档头部的<HEAD>标签和<TITL>标签之间。">
<meta name="robots" content="">
<meta name="author" content="TG,TG@qq.com">
<meta name="copyright" content="本网站版权归TG所有">
<meta name="generator" content="你所用的编辑器">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

网页基本标签

标题标签

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

段落标签

<p>这是一个段落</p>

<pre>使空格、   
回车有效</pre>

换行标签

<br/>

水平线标签

<hr/>

字体样式标签

<b>粗体</b>
<strong>粗体</strong>
<i>斜体</i>
<em>斜体</em>
<u>下划线</u>
<s>中划线</s>
<sup>字体为上标</sup>
<sub>字体为下标</sub>
<font>定义字体属性<font>

注释和特殊符号

注释:

<!-- 在此处写注释 -->
<!-- 这是单行HTML注释 -->
 <!-- 这是一个例子 HTML多行注释 -->

特殊符号:

<!-- 空格 -->
&nbsp;
<!-- > -->
&gt;
<!-- < -->
&lt;
<!-- 版权号 -->
&copy;

媒体标签

图像

<img src="" alt=“text” title=“text” width=“x” height=“y”>

视频

<video src="" controls autoplay></video>

音频

<audio src="" controls autoplay></audio>

超链接

<a href="链接地址" target="目标打开窗口" >链接文本或图像</a>
target值 描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。

锚链接

<!--使用name作为标记-->
<a name="top">顶部</a>
<a href="#top">回到顶部</a>

功能链接

邮箱

<a href="mailto:1456858781@qq.com">邮箱</a>

QQ链接

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

列表标签

有序:

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

无序:

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

子标题:

<li></li>

表格标签

例子:

<!--border: 规定表格边框的宽度。 cellpadding:规定单元边沿与其内容之间的空白。 cellspacing:规定单元格之间的空白。 width:规定表格的宽度。summary:规定表格的摘要。-->
<table border="1">
    <caption>这是表格的标题</caption>
    <!--表格的行显示 -->
	<tr>
        <!--表格的列显示 -->
        <!--rowspan="2": 表格的跨行显示(此处跨了两行)-->
		<td rowspan="2">阿里巴巴旗下网站</td>
		<td>我要买</td>
		<td>我要卖</td>
		<td>我的淘宝</td>
	</tr>
	<tr>
        <!--colspan="3":表格的跨列显示(此处跨了三列) -->
		<td colspan="3">您好,欢迎来淘宝!</td>
	</tr>
</table>

内联框架

点击链接打开内联框架的方法:

<iframe src="" name=“lian” frameborder=“0” width=“1000px” height=“800px”></iframe>
<a href=“index.html” target=“lian”>点击跳转</a>

bilibili视频:

<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

表单标签

<form name="" action="http://www.baidu.com" method="post"></form>

method有两种方法:

  1. post:隐式提交
  2. get:显示提交

例子:

 <form action="http://www.baidu.com" method="post">
	<p>姓名:&nbsp;<input type="text" size="20" maxlength="20"></p>
	<p>密码:&nbsp;<input type="password" size="20" maxlength="20"></p>
	<p>感兴趣的职位:</p>
	<p><input type="radio" name="兴趣" value="Web设计" checked="checked">Web设计&nbsp;
		<input type="radio" name="兴趣" value="Web开发" >Web开发&nbsp;
	</p>
    <input type="submit" value="提交">
	<input type="reset" value="重置">
</form>

文本框

<!--普通输入文本-->
<p>姓名:&nbsp;<input type="text" size="20" maxlength="20"></p>
<!--密码输入框-->
<p>密码:&nbsp;<input type="password" size="20" maxlength="20"></p>
<!--点击文字锁定到输入框 -->
<p>
	<label for="mark">你点我试试</label>
	<input tpye="text" id="mark">
</p>

单选框

<p>
    <input type="radio" name="兴趣" value="Web设计" checked="checked">Web设计&nbsp;
	<input type="radio" name="兴趣" value="Web开发" >Web开发&nbsp;
</p>

多选框

<p>
    爱好:
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="music" name="hobby"/>听音乐
    <input type="checkbox" value="chat" name="hobby"/>聊天
    <input type="checkbox" value="game" name="hobby"/>游戏
</p>

按钮

<input type="button" name="btn" value="点击">
<!--图片按钮具有自动提交功能 -->
<input type="image" src="">
<input type="submit" value="提交">
<input type="reset" value="重置">

下拉框

<p>国家:
    <select name="列表名称">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="eth">瑞士</option>
        <option value="yindu">印度</option>
    </select>
</p>

文本域

<p>其他要求:</p>
<textarea name="textarea" id="1" cols="30" rows="6">
包括薪水待遇、工作地点等
</textarea>

文件域

<input type="file" name="files">

简单验证

<!--自动验证是否为合法的email地址 (HTML5) -->
<input type=“email”>
<!--自动验证是否为合法的URL地址(HTML5) -->
<input type=“url”>
<!--自动验证其中内容是否为合法的数值(HTML5)-->
<input type=“number” min=“0” max=“120” step=“1”>

其他

<!--滑块 -->
<input type="range">
<!--搜索框 -->
<input type="search">
<!--日期选择器 -->
<input type="date">

表单的应用

Readonly 只读
Disabled 不可用
hidden 隐藏域

表单的初级验证

placeholder 输入框提示
required 非空判断
pattern 正则表达式

页面结构分析

元素名 描述
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标题脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于地址栏)
nav 导航类辅助内容
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/114424.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Java经典代码-冒泡排序[通俗易懂]

    Java经典代码-冒泡排序[通俗易懂]/** *@authorManScript * */publicclassMaopao{staticint[]scores={5,10,5,2,9,3,8};publicstaticvoidmain(String[]args){for(inti=0;ifor(intj=0;jif(scores[j]>scores[j+1]){

  • Python 相关文件常见的后缀名详解[通俗易懂]

    Python 相关文件常见的后缀名详解[通俗易懂]常见的Python文件后缀有:py、pyc、pyo、pyi、pyw、pyd、pyx等。本文只介绍相对常见的一些后缀名,至于一些特别冷门的文件格式,例如一些文章提到的pyz、pywz、rpy、pyde、pyp、pyt等,并没有进行研究。因为这些扩展名资料很少,网上搜到的文章似乎都是同一个出处,只是简单提了一句,说了等于没说。py最常见的Python源代码文件。实际上如果用python+文件的方式运行代码,只要文件内容相同,后缀名是不重要的,也就是说下面的运行结果都是等价.

  • (数据库)数据库分类

    (数据库)数据库分类1.面向操作的关系型数据库典型性应用领域:ERP,CRM,信用卡交易,中小型电商数据储存方法:表格流行厂商:OracleDatabase,MicrosoftSQLServer,IBMDB2,EnterpriseDB(PostgreSQL),MySQL优点:完善的生态环境保护,事务保证/数据一致性缺点:严苛的数据模型界定,数据库拓展限制,和非结构型的结合应用较难。2.面向数据分析的关系型数据库典型性应用领域:数据仓库,商务智能,数据科学研究数据储存方法:表格流行厂商:OracleE

  • C++find函数用法_MATLAB中find的用法

    C++find函数用法_MATLAB中find的用法C++中STL里提供了许多字符串操作的函数,下面是字符串查找方面的部分函数用法简介:1.find()查找第一次出现的目标字符串:#include&lt;iostream&gt;#include&lt;cstdio&gt;usingnamespacestd; intmain(){strings1="abcdef";strings2="de";…

    2022年10月14日
  • 计算机网络面试题汇总

    计算机网络面试题汇总文章目录TCP/IP体系结构1.TCP/IP的四层模型指的是哪些?2.OSI的七层模型五层模型的作用:(字节跳动)TCP、UDP的区别如何在应用层保证udp可靠传输TCP流量控制TCP拥塞控制网络拥塞的原因主要有以下三点:拥塞控制的目的:拥塞控制的方法:拥塞控制的常见算法:1.慢开始2.拥塞控制3.快重传-快恢复综合TCP的三次握手过程能否变为二次握手acceptconnectlisten对应三次握手什么阶段TCP的四次挥手过程四次挥手timewaittcp[keep]()alive实现原理t

    2022年10月31日
  • 文件包含漏洞

    0x00前言在我们文件上传的时候,如果是白名单通常会配合到文件包含和解析漏洞来getshell,那么这里先来说说文件包含。0x01 文件包含漏洞在php当中的文件包含的内容都会被当作php

    2021年12月11日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号