1. 全栈程序员必看首页

HTML详细笔记

全栈程序员-站长 • • 未分类 • 阅读 49

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 导航类辅助内容
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/114424.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • Http 和 Tcp 的区别

    Http 和 Tcp 的区别

    Http 和 Tcp 的区别Http是包装数据的，Tcp是传输数据的。都是先Tcp建立连接，然后传输数据，如果没用http，对方无法识别你传输的数据是什么，所以需要http包装数据，其他应用层协议也可以。

    全栈程序员-站长的头像 全栈程序员-站长
    2025年11月28日
    6
  • Netty之ByteBuf

    Netty之ByteBuf

    Netty之ByteBuf一、功能原理ByteBuf是一个byte存放的缓冲区。ByteBuf通过两个位置的指针来协助缓冲区的读写操作，读操作使用readIndex，写操作使用writeIndex。+——————-+——————+——————+|discardablebytes|readablebytes

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月19日
    5
  • pycharm 2021.2.3激活码(已测有效) idea

    pycharm 2021.2.3激活码(已测有效)

    pycharm 2021.2.3激活码(已测有效)，https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧！

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月14日
    1.4K
  • UVALive 6525 Attacking rooks 二分匹配 经典题

    UVALive 6525 Attacking rooks 二分匹配 经典题

    UVALive 6525 Attacking rooks 二分匹配 经典题

    全栈程序员-站长的头像 全栈程序员-站长
    2022年1月31日
    51
  • git命令拉远程分支到本地_git强行切换分支

    git命令拉远程分支到本地_git强行切换分支

    git命令拉远程分支到本地_git强行切换分支Clone代码到本地执行gitclone从远程仓库clone代码到本地仓库：gitclonegit@github.com:secbr/nacos.git查看分支列表执行gitbranch-a查看所有分支列表：(base)appledeMacBook-Pro-2:nacosapple$gitbranch-a*developremotes/origin/0.2.1remotes/origin/0.2.2remotes/origin/0.3.0remot

    全栈程序员-站长的头像 全栈程序员-站长
    2025年12月10日
    3
  • jsessionId的使用

    jsessionId的使用

    jsessionId的使用jsessionid的作用  在web应用的开发中我们会经常看到这样的url：http://www.xxx.com/xxx_app;jsessionid=xxxxxxxxxx?a=x&amp;b=x…。这跟一般的url基本一样，只有一个地方有区别，那就是“;jessionid=xxxxxxxx”。这个参数有时候有，有时候又没有，说它是参数可又跟一般传递的参数不同，它是紧跟在url后面用分号…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月13日
    34

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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