html基础笔记与html5代码展示

最新推荐文章于 2024-05-06 18:33:50 发布
最新推荐文章于 2024-05-06 18:33:50 发布
阅读量871 收藏
点赞数
文章标签： html html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Linlietao0587/article/details/129659221
版权

HTML 学习

一 、基本标签

VSCode 默认快捷键 ! 自动生成代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1.1 文档声明 Doctype

< !docType html >

1.2 html标签对 html

​ 其中lang=“zh-CN” 表示中文

1.3 head页头

head里标签解释
title标题
meta为搜索引擎提供信息
link引入外部css文件,js文件和设置logo rel=“stylesheet” type=“text/css” href=“mystyle.css”
stylecss样式
scriptjs代码

meta中的name属性

属性值name说明content
keywords网页的关键字(可多个)
description网页的描述
author网页的作者
copyright版权信息
viewport网页视口大小比例

meta中的http-equiv属性

<!--定义网页所使用的编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--简写 （中文编码）-->
<meta charset="utf-8" />

定义网页自动刷新跳转

<!--表示当前页面6秒后跳转百度页面-->
<meta  http-equiv="refresh" content="6;url=http://www.baidu.com"/>
<!--30秒刷新当前页面-->
<meta http-equiv="refresh" content="30">

1.4 bod页身

注释 快捷键 ctrl+/

二、文本 text

2.1 基本标签 (Basic Tags)

标签说明
h标题1~6
p段落（段落与段落有一定间距）paragraph 会自动换行
br换行（不会有间距）
hr水平线
div盒子标签（一行只能放一个大盒子）（小程序view）
span盒子标签（一行可以放多个小盒子）

2.2 文本格式化 （Formatting）

标签说明
strong粗体
em斜体
sup、sub上标 和下标
s、u中划线和下划线
big、small大字号和小字号

标签可分为为 一般标签 和 自闭标签

< meta /> 、< link/> 、< br />、< hr />、< img />、< input />

也可以分为 块元素 和 行内元素

块元素（block）：独占一行，可容纳 块元素和行内元素 如div

行内元素（inline）：可同一行，不可容纳块元素，如span

2.3 特殊符号

空格符 &nbsp；(记住即可) 牛逼色胚

  • 易输入的
特殊符号说明代码;
"双引号（英文）&quot
‘左单引号&lsquo
’右单引号&rsquo
×乘号&times
÷除号&divide
>大于号&gt
<小于号&lt
&“与”符号&amp
—长破折号&mdash
|竖线&#124
  • 难输入的
特殊符号说明代码;
§分节符&sect
©版权符&copy
®注册商标&reg
™商标&trade
€欧元&euro
£英镑&pound
¥日元&yen
°度&deg

三、列表 list

标签说明
有序 ol (ordered list)有顺序，只能包含li
无序 ul (unordered list)无顺序，只能包含li
定义 dl (definition list)dt用于添加要解释的名词，而dd用于添加该名词的具体解释。

HTML的精髓就在于标签的语义，要 语义化

四、表格 table

<table alian=center border="1" cellpadding="10" cellspacing="0" width="300">
	<caption>考试成绩表</caption>
    <thead>    
    	<tr>
        	<th>姓名</th><th>语文</th><th>英语</th>
        </tr>
     </thead>
     <tbody>
     	<tr>
        	<td>小明</td><td>80</td><td>80</td>
        </tr>
        <tr>
        	<td>小红</td><td>90</td><td>90</td>
        </tr>
        <tr>
        	<td>小杰</td><td>100</td><td>100</td>
        </tr>
      </tbody>
      <tfoot>
      	<tr>
        	<td>平均</td><td>90</td><td>90</td>
        </tr>
      </tfoot>
    </table>

标题：caption

表头：th

表行：tr

单元格：td

  • 用 标签表示表格的头部区域，位于第一行
  • 用 标签表示表格的主体区域，主要是用于放数据本体
  • 用位于最下行

4.1 表格属性

属性名属性值描述
alignleft,center,right规定表格相对周围元素的对齐方式
border1或者" "规定表格单元是否拥有边框，默认为" "，表示没有边框
cellpadding像素值规定单元边沿于其内容之间的空白，默认1像素
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度

4.2 合并表格

  • 合并行：rowspan=“合并单元格的个数”
  • 合并列：colspan=“合并单元格的个数”

五、图片 img

<img src="" alt="" />
  • 绝对路径
  • 相对路径

位图 jpg、png、gif

矢量图

六、超链接 link

<a href="链接地址" target="打开方式">文本或图片</a>
  • _self 在原来窗口打开(默认值)
  • _blank 在新窗口打开

跳转外部链接

跳转内部链接

跳转锚点链接

<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

七、表单 form

<form action="url地址" method="提交方式" name="表单域的名称">
 
</form>

form属性

属性说明
name表单名称（以区分同页面多个表单）
method提交方式（get或post）
action提交地址（url地址）
target打开方式（_blank）
anctype编码方式（一般用于上传文件功能）
<input type="表单类型" />
type的属性值说明
text单行文本框
password密码文本框
radio单选框
checkbox多选框
button、submit、reset按钮
file文件上传

7.1 单行文本框

<input type="text" value="单行文本框" size="50" maxlength="10"/>
  • value：值
  • size：长度
  • maxlength：最多可输入的字符数

7.2 密码文本框

<input type="password" />

与单行文本框 相同，有value、size、maxlength

7.3 单选框

<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女" />女

7.4 复选框

<input type="checkbox" name="fruit" value="苹果"/>苹果
<input type="checkbox" name="fruit" value="香蕉" checked/>香蕉
<input type="checkbox" name="fruit" value="西瓜"/>西瓜

7.5 按钮

<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮" />
<button>按钮</button>

7.6 文件上传

<input type="file"/>

7.7 多行文本框

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

7.8 下拉列表

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

select属性

属性说明
multiple设置下拉列表可以选择多项
size设置下拉列表显示几个列表项，取值为整数

option属性

<option value="内容" selected>内容</option>

7.9文本标签lable

lable标签for属性与id属性相同

<lable for="sex"> 男 </lable>

八、框架 iframe

<iframe src="链接地址" width="数值" height="数值"></iframe>

<iframe src="https://www.itnanls.cn"></iframe>

九、HTML5

color

<input type="color" name="favcolor">

date

<input type="date" name="bday">

datetime

<input type="datetime" name="bdaytime">

datetime-local

<input type="datetime-local" name="bdaytime">

email

<input type="email" name="email">

month

<input type="month" name="bdaymonth">

number

<input type="number" name="quantity" min="1" max="5">
属性说明
disabled禁用
max最大值
maxlength最大字符长度
min最小值
pattern验证输入字段模式
readonly输入值无法修改
required输入值无法修改
size输入字段可见字符数
step输入数字间隔
value输入字段默认值

range

<input type="range" name="points" min="1" max="10">

search

<input type="search" name="googlesearch">

tel

<input type="tel" name="usrtel">

time

<input type="time" name="usr_time">

url

<input type="url" name="homepage">

新属性

属性值说明
autocomplete自动提示以输入过的内容
autofocus自动获取焦点
height、width长、宽
min、max小、大
pattern正则
placeholder提示
required必须

HTML5图像

  • < canvas >
  • < svg >
林烈涛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在线html代码预览,在HTML页面中预览HTML代码
weixin_32943417的博客
06-01 1412
function Report (id) {this.div = gel(id);this.div.style.height = '100%';this.trip;}//initializes the Report object and renders the HTML of the report to this.divReport.prototype.init = function(trip) ...
HTML 基础知识
u010723080的博客
05-21 717
HTML 骨架 <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> HTML 标签分类 双标签：<标签名></标签名> 单标签：<标签名/> HTML 标签关系 嵌套关系： <head> <title><
HTML页面中显示一段代码
AlwaySimple的博客
11-19 3723
显示方法 使用pre标签，格式如下： <pre> 代码内容........................ </pre> 这里不进行详细解释，具体可以查询 pre,code等html标签的用法。 显示效果 代码 <!DOCTYPE html> <html> <head> <meta charset="u...
用html显示代码区域，＜code＞＜/code＞和＜pre＞＜/pre＞
qq_36825145的博客
01-26 611
pre元素并不能代码放入，里面的内容是什么，可以是歌词，可以是代码，可以是其它文本。当pre元素来展示源代码的时候最好的方式是用code元素来包裹代码，这样既可以保持格式又可以代表语义，一举数得。<pre>，是多行代码，它虽能保留内容中的空格、换行符，但<pre>缺少了“语义化”。我们可以把这两个标签结合起来嵌套使用，这样就能让<code>保留内容的空格以及换行符。，是单行代码，不能保留内容中的空格、换行符。
html如何显示代码实现方法,在html中实现代码的高亮显示
weixin_35183690的博客
06-20 734
最近在做组内的组件库，用到代码的高亮显示~我查到的资料有syntaxhighlighter、highlight.js、prism.js基本实现原理都是引入需要的JS文件和CSS样式，将要显示的代码封装在标签中syntaxhighlighter效果如图(shCoreDefault样式)var myCustomFn = function ShowFn() {Ext.Msg.alert(‘消息框‘, "...
如何在html页面中展示html源码
huzhenv5的博客
03-05 5810
1，<input> 输入框是可以展示html源码的，如下： <input value="<script>alert(1)</script>"> 展示的结果为： 2，<textarea> 文本输入框是可以展示html源码的，如下： <textarea> <script>console.log(12)&lt...
HTML介绍以及常用代码
Xiaohuang的博客
12-05 1万+
HTML
如何在html网页中显示html代码
热门推荐
hacker_wolf的博客
05-19 1万+
如何在html网页中显示html代码 在html网页中显示html代码 使用<pre>、<code>标签。 注意：代码中所有"<"、">"都要分别替换成&lt和&gt，如果不进行替换它会认成html语言，变成那段代码的执行结果而不是显示代码。如果代码中还有其他特殊字符也要进行替换。如果不加pre，所有代码的换行都会被认成一个空格，会根据浏览器大小进行换行，而不会在该换行的地方换行。 <pre><code>这里是代码</pre&
HTML5学习笔记之html5与传统html区别
12-14
HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变，主要有如下： 1.HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变。 2.HTML5中，刻意不使用版本声明，一份文档将会适用于所有...
学习HTML与CSS的相关笔记代码.zip
01-05
学习HTML与CSS的相关笔记代码学习HTML与CSS的相关笔记代码 学习HTML与CSS的相关笔记代码学习HTML与CSS的相关笔记代码 学习HTML与CSS的相关笔记代码学习HTML与CSS的相关笔记代码 学习HTML与CSS的相关笔记代码学习HTML...
html手写代码学习笔记.pdf
11-28
html手写代码学习笔记.pdf
html5全屏跨年烟花特效代码
12-12
2022跨年烟花代码,HTML5全屏烟花动画特效代码
新手小白一行代码快速生成HTML代码块
m0_56238352的博客
09-12 591
一行代码快速生成html代码块
VSCode 使用教程-4.使用open in browser预览html效果
qq_27371025的博客
09-23 2587
VSCode 编写html代码，可以使用open in browser预览html效果
html 显示代码块,使用Pre在文章中显示代码块 - 文章教程
weixin_28899845的博客
06-23 3632
作为技术博客，难免会在文章中插入一部分代码块，代码具有一定的格式，所以很自然就会使用 标签，其在使用上与 等其他标签没有太大区别，但由于其会保留标签中所有的空白与换行，因此在使用时还是有几个地方是需要注意的。Pre标签 标签通常用于展示预格式化的文本，默认使用等宽字体，并且保留所有的空白和换行，效果如下所示：清明朝代：唐代作者：杜牧清明时节雨纷纷，路上行人欲断魂。借问酒家何处有，牧童遥指杏花村...
【尚硅谷HTML5】前端HTML代码笔记
Blue
04-13 988
HTML501.text02.实体index1index2index3index4index503.标签04.语义化标签05.语义化标签06.语义化标签07.列表08.超链接09.相对路径10.超链接11.图片标签12.内联框架13.音视频 01.text <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title
HTML 表格学习指南 - 打造精美且高效的数据展示方式
canshanyin的博客
06-18 2519
HTML 表格是一种常见且重要的网页元素，它能够以结构化的方式展示数据、信息和内容。在本详细指南中，我们将深入学习 HTML 表格的创建方法，包括表格的基本结构、样式设计、合并单元格、排序功能及无障碍访问性等，帮助你打造精美且高效的数据展示方式。通过 CSS 可以对表格进行样式设计，包括修改表格样式、改变表格的边框、颜色和间距，以及添加背景颜色和边框效果。在 HTML 表格中，我们可以使用 JavaScript 实现简单的表格排序功能。该代码使用了一个排序算法，根据点击的表头进行排序，支持升序和降序排序。
【记录】Python3｜ 将 PDF 转换成 HTML/XML（✅⭐⭐⭐⭐pdf2htmlEX）
qq_46106285的博客
05-01 839
总体来说，PDF2HTMLEX 是一款非常优秀的 PDF 转 HTML 工具。尽管在处理文件路径时存在一些小问题，但这并不影响其出色的转换效果。
【前端】HTML实现个人简历信息展示页面
最新发布
2303_80341387的博客
05-06 498
接下来，我们可以看到每一个项目都有一个小标题，那么这些项目与项目之间可以用有序列表来表示，而功能介绍中的内容，我们又可以通过无序列表来表示。我们首先看到的是我们页面中的姓名，紧接着下面是我们的基本信息板块，教育背景板块，专业技能板块，还有我的项目板块，还有一个个人评价板块。接下来，我们还是首先看到教育背景这个标题，我们可以看到教育背景和基本信息是对应的，所以我们和基本信息一样都使用。接下来，我们就结合我们之前学习过的HTML的标签来打造一个简历信息的展示的页面.那么此时我们就写完了我们的基本信息板块。
html+css+javascript笔记
12-29
以下是一个简单的HTML+CSS+JavaScript笔记的示例： ```html <!DOCTYPE html> <html> <title>HTML+CSS+JavaScript笔记 /* 在demo.css中定义的样式 */ div { color: red; } 这是一个HTML文档中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值