HTML基础

HTML格式

基础

1.标题

2.段落

3.超链接

4.列表

5.块

6.锚

脚本

HTML格式

下面展示一些 HTML整体结构。

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="w3school.css" />//链接外部css<meta charset="UTF-8">//中文<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题</title>
</head>
<body>主体
</body>
</html>

基础

下面展示一些 标题，段落，超链接，列表，块，锚。

标题

//不同的标题<h1>This is a heading.</h1><h2>This is a heading.</h2><h3>This is a heading.</h3>

段落

//段落<p>在进行换行时最好用&lt;br /&gt; ,&lt;br&gt;是没有关闭的空元素。</p>//<>在代码里用 &lt; 和 &gt; 表示。在进行换行时最好用<br />, <br>;是没有关闭的空元素。<p>HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。<br />属性总是在HTML元素的开始标签中规定。</p><p>&lt;hr /&gt;在HTML创建水平线。hr元素可以分隔内容。</p><p style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color: blue;font-size: 20px;">字体，颜色，字体大小。</p><p style="text-align: center;">水平对齐方式，居中。</p><P contenteditable="true">这是一段可编辑的文本。</P><p><b>加粗</b><big>大号字体</big><em>着重文字</em><small>小号字体</small><strong>加重语气</strong><sub>下标</sub><sup>上标</sup><ins>定义插入字</ins><del>删除线</del><p style="text-decoration: overline;">上划线 </p><p style="text-decoration:underline;">下划线</p><p style="text-decoration:line-through;">中划线</p><pre>这是预保留文本。它保留了空格    和换行。</pre><code>code定义计算机代码：var person={adasdsaasdas"dsa"}</code><kbd>kbd定义键盘码。</kbd><samp>samp定义计算机代码版本。</samp><tt>tt定义打字机代码。</tt><var>var定义变量,物理公式:E=m c<sup>2</sup></var><p>简称或缩写<abbr title="这是缩写">abbr</abbr>哦哦哦</p><address><p>定义地址<a href="23973966@qq.com">zzzwww</a><br /></p></address><p>定义文字方向，从右向左输出：<br /><bdo dir="rtl">Here is a cat.</bdo>从左往右输出：<br /><bdo dir="ltr">Here is a cat.</bdo></p><p>浏览器会在blockquote标签前后加换行，并增加外边距。</p><blockquote>blockquote标签，定义块引用：This is a long quotation.This is a long quotation.Thisis a long quotation.这里面的文本会从常规文本中分离出来，块引用会拥有他们自己的空间。</blockquote><p>浏览器会在blockquote标签前后加换行，并增加外边距，&lt;q &gt;标签是短引用：<q cite="URL">引用的会被加上引号，适合短的行内引用，长的用blockquote</q></p><P>一打有<del>二十</del><ins>十二</ins>件。</P><p>大多数浏览器会改写成删除文本和下划线文本，一些老式浏览器会把删除文本和下划线文本显示为普通文本。</p></p>

段落格式运行结果

超链接

//超链接<a href="www.baidu.com">百度<br /></a>//以图片为链接：<a href="http://www.baidu.com"><img border="0" src="1.jpg" /></a> <p><a href="mailto:2397396691@qq.com?cc=name@email.com&bcc=name@email.com&subject=sdadad&body=aasaaa">收件人地址，抄送电子邮件地址，密件抄送电子邮件地址，题目，内容</a></p><p>一幅图像:<img src="1.jpg" width="100px" height="80px" /></p><p>链接图片<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607529373219&di=adc631d0b29fc5b0a13dc828e628b203&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201402%2F16%2F20140216121848_NU3jd.jpeg"width=40px height="80" /></p><p>其他文件夹的图片<img src="/1-Web/我的Web学习/3.jfif" width="80px" height="60px" alt="big dog"/> </p><p>替换文本属性alt<img src="/我的Web学习/3.jfif" width="80px" height="60px" alt="big dog" /></p><p>图像<img src="https://www.w3school.com.cn/i/eg_cute.gif" align="middle" />在文本中</p><p>图像浮动在左侧<img src="https://www.w3school.com.cn/i/eg_cute.gif" align="left" alt="浮动左侧图片" />啊啊</p><p>图像浮动在右侧<img src="https://www.w3school.com.cn/i/eg_cute.gif" align="right" alt="浮动右侧图片" />啊啊</p><p>图片映射<img src="1.jpg" width="200px" height="150" border="0" usemap="#mm" alt="mm" /><map name="mm" id="mm"><area shape="circle"coords="50,40,20"href="http://www.baidu.com"target="_blink"alt="mm" /><areashape="rect"coords="0,0,50,40"href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607532115864&di=debed1381ab658b011e013d844f4a86c&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F12710473008%2F641"target="_blink"alt="mm" /> </map></p>

效果

表格

//表格
<table border="1"><caption>我的标题</caption><tr><td>列1</td><td>列2</td><td>列3</td></tr><tr><th>内容1</th><th colspan="2">跨行合并</th></tr><tr><td rowspan="2">列1</td><td>列2</td><td>列3</td></tr><tr><td>列2</td><td>列3</td></tr></table>//<table border="8" cellpadding="1" cellspacing="8" background="1.jpg">//边框，边距，间距，背景
//框架<table frame="box"><tr><td>6666</td></tr><tr><td>6666</td></tr></table>

列表

  //列表<p>无序列表：disc项目符号表：<ul type="disc" ><li>apple</li><li>banana</li><li>sadsada</li></ul>circle项目符号表：<ul type="circle"><li>asda</li><li>dasdw</li><li>dasdwq</li></ul>square项目符号表：<ul type="square" ><li>dsada</li><li>adqq sad</li><li>aaaa啊啊啊</li></ul>有序列表：数字列表：<ol start="5"><li>dads</li><li>sada</li><li>45464</li></ol>大写字母列表：<ol type="A"><li>sadd</li><li>dasdw asa</li><li>dsdqew</li></ol>小写字母有序列表：<ol type="a"><li>adqw</li><li>dsqewqe</li><li>qwe</li></ol>阿拉伯数字有序列表：<ol type="I"><li>dasdwq</li><li>qwe adsa</li><li>茶<ul><li>绿茶</li><li>红茶</li><li>乌龙茶</li><ul><li>中国茶</li><li>外国tea</li></ul></ul> </li></ol>自定义列表：<dl><dt>定义列表</dt><dd>自定义列表项的定义</dd><dt>自定义列表项2</dt><dd>自定义列表项的定义2</dd></dl></p>

列表效果图

块

  //块<h2>块</h2><div style="background-color:chartreuse ;padding:50px;margin:auto;width: 100px;height: auto;word-wrap: break-word;word-break: break-all;"><p>div块<a href="http://www.baidu.com" accesskey="d" target="_blink">shift+alt+"accesskey="d""快捷键打开百度</a></p></div>

块效果图：

锚

//锚<p><a href="#mao" style="color: darkblue;font-size: 50px;">锚1111</a></p><p><a name="mao" style="color: chartreuse;">锚</a> </p><p><a href="3.html#3html">锚外页面</a> </p><p><a href="w3school.html" target="_top">跳出框架</a> </p>

脚本

//小脚本乱弄得
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="w3school.css" /><script>function showDatails(animal){var animalType=animal.getAttribute("date-animal-type");alert(animal.innerHTML+"是一种"+animalType+"。");}</script><title>W3school学习草稿二</title>
</head>
<body ><h1>W3school学习草稿二</h1><h2>物种</h2><p>点击某个物种来查看其类别：</p><ul><li onclick="showDatails(this)" id="#" date-animal-type="鸟类">喜鹊</li><li onclick="showDatails(this)" id="#" date-animal-type="鱼类">鲨鱼</li><li onclick="showDatails(this)" id="#" date-animal-type="虫类">毛毛</li></ul><p draggable="true">这是一个可以拖动的段落。 </p><p dropzone="move">这是一个 可以到处跑的段落，奈何浏览器不支持。</p><p hidden>这个段落会被隐藏。</p><p lang="zh">语言</p><p contenteditable="true" spellcheck="true">这是一段可编辑的段落，外加检查。</p><P tabindex="1">指定tab键顺序</P><p tabindex="2" title="tab键顺序">Tab键顺序</p><p translate="no">此段必不翻译，奈何所有浏览器都不能用。</p><div class="cities"><p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennaiaits history goning back to its founding by the Romans, who named it Londinuim.</p></div>
</body>
</html>

效果

笔记--HTML基础相关推荐

初学Oracle的笔记(2)——基础内容(实时更新中..)
续初学Oracle的笔记(1)--基础内容(实时更新中..) 1.oracle中创建一张表,写法与sql server中的一样. SQL> create table Course 2 ( cn ...
Docker:学习笔记(1)——基础概念
Docker:学习笔记(1)--基础概念 Docker是什么软件开发后,我们需要在测试电脑.客户电脑.服务器安装运行,用户计算机的环境各不相同,所以需要进行各自的环境配置,耗时耗力.为了解决这个问题 ...
学习MSCKF笔记——四元数基础
学习MSCKF笔记--四元数基础学习MSCKF笔记--四元数基础 1. 四元数基本性质 1.1 加法 1.2 乘法 1.3 共轭 1.4 模 1.5 逆 1.6 单位四元数 1.7 指数 1.8 对 ...
笔记-项目管理基础知识-复习要点
1. 项目的特点临时性(一次性).独特性.渐进明确性 2. 项目目标包括成果性目标和约束性目标 ●笔记-项目管理基础知识-项目目标 3. 项目目标的特点多目标性.有限性.层次性 4. ▲项目管理5 ...
数字图像处理与Python实现笔记之基础知识
数字图像处理与Python实现笔记之基础知识摘要绪论 1 数字图像处理基础知识 1.1 数字图像简介 1.1.1 数字图像处理的目的 1.1.2 数字图像处理的应用 1.1.3 数字图像处理的特点 ...
Python学习笔记_1_基础_2：数据运算、bytes数据类型、.pyc文件（什么鬼）
Python学习笔记_1_基础_2:数据运算.bytes数据类型..pyc文件(什么鬼) 一.数据运算 Python数据运算感觉和C++,Java没有太大的差异,百度一大堆,这里就不想写了.比较有意思 ...
python input 拖入路径去除转义空格_python学习笔记（基础-2）(转载)
1.输出用print()在括号中加上字符串,就可以向屏幕上输出指定的文字. 2.输入如果要让用户从电脑输入一些字符怎么办?Python提供了一个input(),可以让用户输入字符串,并存放到一个变 ...
php基础教学笔记,php学习笔记：基础知识
php学习笔记:基础知识 2.每行结尾不允许有多余的空格 3.确保文件的命名和调用大小写一致,是由于类Unix系统上面,对大小写是敏感的 4.方法名只允许由字母组成,下划线是不允许的,首字母要小写,其 ...
java基本语法心得_Java学习笔记(一)——基础语法(上)
Java学习笔记(一)--基础语法(上) 软件构造写在前面编写Java程序时,应注意以下几点:大小写敏感:Java是大小写敏感的,这就意味着标识符Hello与hello是不同的. 类名:对于所有的 ...
MySQL学习笔记-从基础到进阶
MySQL自学笔记 MySQL 基础 SQL SQL通用语法 SQL分类 DDL数据操作数据类型 DML数据操作 DQL数据操作 DCL数据控制函数约束多表查询事务进阶存储引擎 **索引 ...

笔记--HTML基础

HTML基础

HTML格式

基础

1.标题

2.段落

3.超链接

4.列表

5.块

6.锚

脚本

HTML格式

基础

标题

段落

超链接

表格

列表

块

锚

脚本

笔记--HTML基础相关推荐

最新文章

热门文章