HTML基础标签

已于 2022-02-12 15:28:09 修改
阅读量348 收藏
点赞数 1
分类专栏： 学过且学完 新手看不懂老手懒得看系列 文章标签： html
于 2021-06-23 23:40:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46642711/article/details/118116212
版权

目录

文本编辑需要用到: 

html头部标签

link标签: 

base标签: 

 style:

meta标签:

body内容:

图片标签:

图像标签(一张图不同区域不同链接):

表格:

列表:

自定义列表:

网站布局:

表单:

下拉列表:

文本框:

按钮:

带边框的表单:

向指定邮箱发送电子邮件:

label标签:

表单输入框禁用:

下拉框选项组:

输入框.下拉框选项:

输出框:

Iframe 标签,可以引入其他网站:

点击引入其他界面:

引入脚本:

字符实体:

 文本格式:

链接:

总结:

文本编辑需要用到: 

  •         行内标签:不会自动换行.                  
  •         块级标签:会自动换行         
                     
  •         行内块标签:不会自动换行,但是能调宽高.    

字体大小: 

<h1>这是h1标签</h1>    有宽高
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>

p标签会自动换行: 

<P>段部标签,有宽高</P>

a标签不会自动换行 

<a href="" accesskey="f">链接</a> <!--accesskey是快捷键触发这个标签,实测一般快捷键都会冲突,每个浏览器还不一样,所以基本没啥用.-->

 线条标签:

<hr>水平线.

注释:

<!--注释-->

 斜体:

<i>斜体</i>

加粗:

<b>加粗字体</b>

左下角位置:

<sub>左下标</sub>

右上角位置:

<sup>右上标</sup>

html标签不区分大小写,但是最好小写.

标签内的属性也不区分大小写(href=""),但是最好小写.

title=""属性,提示词

更多的样式建议使用css,

html头部标签

  •         内联式css样式、
  •         嵌入式css样式、
  •         外部式css样式。
<title>    </title>               标签定义了不同文档的标题。

link标签: 

<link rel="stylesheet" type="text/css" href="">
<!--
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
-->

base标签: 

<base href="" target="_blank">    所有的链接标签的默认链接

 style:

<style> </style>                  写样式的

meta标签:

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!--content里面是关键字,name给搜索引擎说,这里面是关键字-->

<meta name="description" content="免费 Web & 编程 教程">//为网页定义描述内容:

定时刷新:

<meta http-equiv="refresh" content="30"> //秒

脚本标签:

<script> </script>

body内容:

<header>首部</header>

<section>部分区域</section>

<footer>底部</footer>

<aside>侧边栏</aside>

图片标签:

<img src="路径" alt="描述">  #单标签

图像标签(一张图不同区域不同链接):

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">        //name	mapname	必需。为 image-map 规定的名称。

  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
    
    shape	    default         规定区域的形状。
                rect
                circle
                poly	        

    coords	    coordinates	    规定区域的坐标。
    
    alt	        text            规定区域的替代文本。如果使用 href 属性，则该属性是必需的

    
    


</map>

表格:

<table border="1">                    表格

<th></th>                             表格头

<tr>  <td></td>   <td></td>    </tr>  行 列

</table>

<!--

colspan="2" 跨行
rowspan="2" 跨列

cellpadding="10" 单元格内边距写在table里面的
cellspacing="0"  单元格外间距写在table里面的


<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚
-->

列表:

        无序列表:

<ul >       

<li>第一个</li>
<li>第二个</li>

</ul>

        有序列表:

<ol type="a/A/I/i">  //不仅仅是数字.

<li>第一个</li>
<li>第二个</li>

</ol>

自定义列表:


<dl>
<dt>列表头</dt>
<dd>列表内容一</dd>            //类似于li
<dd>列表内容二</dd>

<dt>列表头</dt>
<dd>列表内容一</dd>
<dd>列表内容二</dd>
</dl>

网站布局:

       div布局:    中部采用 div float属性,向左浮动(静态页面)

        表格布局: 表格包含了顶部,中部,底部.

表单:

<form>
文本输入框: <input type="text" name="firstname"><br>
文本输入框: <input type="text" name="lastname">
</form>

<!--   
type="  text/password"

        radio  单选按钮
        checkbox 多选框
        submit   提交按钮
        reset   重置
        range  滑条
        number  数字输入框 可以点击加减

-->

下拉列表:

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi" selected>Audi</option>
</select>
</form>

也是一个表单才可以提交,
selected  预选

文本框:

<textarea rows="10" cols="30">

一般多选,单选.文本框都是放在,form表单里面的,配合按钮,或者提交表单使用.

按钮:

<form action="">
<input type="button" value="Hello world!">
</form>

带边框的表单:

<form action="">

<fieldset>                                #边框
<legend>Personal information:</legend>    #嵌在边框里面的文字标题:legend


Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">


</fieldset>

</form>

向指定邮箱发送电子邮件:

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

label标签:

<form action="">

  <label for="male">Male</label>        //for某个id
  <input type="radio" name="sex" id="male" value="male"><br>    //需要定义id


  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>


  <input type="submit" value="提交">

</form>

表单输入框禁用:

                disabled

  Name: <input type="text" disabled><br>

下拉框选项组:

<select>
  <optgroup label="Swedish Cars">        //optgroup  选项组标签  标题写在label里面
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

输入框.下拉框选项:

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">                    #预选项,输入框 datalist
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

输出框:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>        //会生成一个输出的地方,配合js使用
</form>

Iframe 标签,可以引入其他网站:

<iframe src="demo_iframe.htm" frameborder="0" loading="lazy"></iframe>

点击引入其他界面:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

引入脚本:

        用不了脚本的时候会有noscript里面的提示.

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

字符实体:

        

&lt             <符号
&#60            <符号
&#060           <符号
&nbsp;          空格



音标
a&#768;
a&#769;
a&#770;
a&#771;


更多的 实体字符 百度查询即可

 文本格式:

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

链接:

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

到这就基本已经把所有基础标签讲到了,没讲到的基本用不到.(还有显而易见的也没说.适合复习使用.)

总结:

现在，你已学完HTML!(自信点,告诉自己你已经学完了.)

[当然它只是HTML不是html5,音频视频什么的都没有.]

注:以后编写应该符合XHTML规范.(注意规范)

接下来可以学习css了

通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。(所以那些文本的格式标签将用不到啦!)

Mr付
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html常见标签
weixin_57100704的博客
12-16 354
p标签和span标签的区别是：p标签会自动换行，而span标签不会自动换行。一般短的语句可以用span标签包裹，长点的用p标签包裹。被包围在pre标签中的文本通常会保留空格和换行符，而文本也会呈现出等宽字体。书写规范，一个页面只允许出现一个h1标签，若重复出现网页会分不清主次内容。标签的内容将会在当前字符高度的一半为基准线的下/上方，字体大小会小一点。都是用于加粗文字的，二者区别是：strong标签是为了突出重点。网页的身体标签，所有的网页内容都放在里面，存放各种标签。br标签和hr标签都是但标签。
【Markdown基本语法】
欢迎来到zrh的博客
12-23 275
Markdown是一种纯文本标记语言，通过简单的标记语法来使普通文本内容具备有一定的格式。Markdown相对于Word这种文档编辑器而言有如下优点，从而被广泛使用：语法简单，让文档编写专注于内容本身；支持Markdown语法的编辑器非常多，而且可以跨操作系统；可以转换为Word/PDF格式；支持在线编辑器:CSDN、简书。
html标签内容为纯英文字符或数字时的溢出处理
lilian129的专栏
01-23 2037
html标签内容为汉字时不溢出、为纯英文字符或数字时的溢出： 涉及交互内容或后台编辑的页面时，某个定义的标签内容为纯英文字符时，会在一行内直接溢出，无法自动换行。这时，可添加css样式处理： word-wrap:break-word; word-break:break-all;
HTML基础标签.md
02-05
HTML基本标签，对于初学者来说这是最基本的内容，有效的掌握基本标签是，学习HTML的第一步，也是至关重要的，
实验1html基础标签（学生端资料）.zip
最新发布
02-22
这个实验1的主题是“HTML基础标签”，意味着我们将深入探讨HTML中的一些基本元素和结构，这对于任何想要学习Web开发的人来说都是至关重要的第一步。 HTML由一系列的标签组成，这些标签定义了网页的内容和结构。每个...
JavaWeb——HTML基础标签table标签与form标签的学习与理解
01-08
使用表格标签制作规整的表格 table标签是表格标签， border属性设置表格的边框厚度， width属性设置表格的宽度， align设置表格的对齐方式， cellspacing设置单元格的间距 tr是行标签， td是单元格标签， th是字体...
HTML5常用基础标签
12-12
这个是个人整理的html的常用基础标签，里面有各个部分的一些解释。
html标签基础学习笔记
05-24
html标签基础学习笔记
HTML1.01 HTML标签及规范基础
09-13
HTML1.01 HTML标签及规范基础 本资源主要讲解了HTML的基础知识，包括HTML的概念、发展历程、标签结构、块状元素和行内元素、W3C规范等。同时，本资源还对HTML的功能、版本演进、浏览器内核、动态网页和静态网页进行...
html标签.xmind
06-27
本人在学习中总结的html标签知识，仅用于学习使用，该总结用Xmind编辑汇总，里面总结的知识点较为全面，适合新手，和对前端网页制作感兴趣的同学，当然也适用于生活中用到该知识点的人员。
p标签不自动换行原因
anruanba4181的博客
10-23 2373
前言：发现以前写的就像是笔记，哪像博客啊，这里再次修改。 问题描述： 在固定宽度的p元素里（任何块级元素同理），长单词不自动换行，中文字符会自动换行，效果如：http://codepen.io/aliceluojuan/pen/rrxbpO 产生原因：1.英文会将不包含空格、换行的连续文本认为是一个词，所以在默认情况下不换行; 　　　　　2.中文的话标点文字都是独立的，所以会...
<span></span>标签自动换行
热门推荐
yun1996的博客
12-04 1万+
标签自动换行 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &amp
td标签中，内容过长不会自动换行
qq_36437172的博客
03-06 2392
1.在<td>中设置样式style为word-wrap:break-word;word-break:break-all;（一般情况只需要设置word-break:break-all即可，但是有时候需要加word-wrap:break-word ） 2.把表格的sytle的table-layout：fixed，表格固定宽度，表格即要自适应他外面的容器，也不要撑出去，然后设置td的word...
p标签实现自动换行CSS
sxysoft_csdn的博客
11-11 4070
p标签实现自动换行 word-break:normal; white-space:pre-warp; word-wrapL:break-word; 1.word-break属性： 在恰当的断字点进行换行。有三个值：normal(使用浏览器默认的换行规则)、break-all(允许单词内换行)、keep-all(只能在半角空格或连字符处换行) 2.white-space属性： white-spac...
用HTML基础标签做网页
03-09
可以使用 HTML 基础标签来创建网页，例如使用 <html> 标签来定义 HTML 文档，使用 <head> 标签来定义文档的头部，使用 <title> 标签来定义文档的标题，使用 <body> 标签来定义文档的主体部分，使用 <h1> 到 <h6> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值