002HTML基础

最新推荐文章于 2024-05-04 15:43:14 发布
最新推荐文章于 2024-05-04 15:43:14 发布
阅读量290 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Manta__/article/details/104376023
版权

语法规范
不区分大小写，但是一般使用小写
注释不能嵌套！
标签必须结构完整，要么成对出现，要么为自结束标签
HTML可以嵌套，不可以交叉嵌套
HTML中的属性必须有值，必须有引号，双单引号都可以

1.框架

<!DOCTYPE html><!--文档声明，声明当前的网页是按照HTML5标准-->
	<html>     <!--根标签，一个页面有且只有一个-->
		<head> <!--帮助浏览器解析网页-->
			<meta  charsef="UTF-8"/><!--需要用来告诉浏览器，网页所采用的编码字符集，用来设置网页的一些元数据，比如字符集，关键字，简介-->
  			<title></title><!--标题标签，搜索引擎在检索页面时，首先检索title-->
		</head>  <!--子标签，与body为兄弟标签-->
	
		   <body>  <!--  页面所有可见内容写在内部-->
		   </body> < !--  子标签	 --> 
	  </html>

2.注释标签 <!-- --> 不会在页面显示，开发人员可以看见

3.标题标签
<h1></h1>........<h6></h6> 由大到小 ，但是文字大小我们不必关心有css可以将六级比一级还大，注重语义，h1最重要，依次减小

4.单独设置标签
<font> 规定文本的字体、字体尺寸、字体颜色。 不赞成使用，css可设置
<h1>这是我的<font color="red">第一个</font>网页</h1>

==5.属性 ==
只能在在开始标签中写，实际就是一个名值对的结构 。w3school可具体查有哪些属性。多个属性空格隔开

6.段落标签 <p></p> 控制一个段落

7.空格标签 &nbsp; HTML中写再多空格都当一个空格对待。 代表一个空格。

8.分割线标签 <hr/>

9.换行标签 <br/>

10.转义字符串 &实体的名字；
在HTML中，例如<,>这种字符不能直接使用，需要一些特殊的符号表示这些字符
< &lt; , > &gt; ， 版权符号 &copy; © w3school 找HTML实体
11.图片标签
使用img标签来向网页中引入ー个外部图片，img标签也是一个自结束标签
属性:
　　src:设置一个外部图片的路径
　　alt:可以用来设置在图片本能显示时,对图片的描述。搜素引可以通过a1t属性来识别不同的图片，若不写,则搜素引不会对图片进行收录
　　width:可以用来修改图片的宽度,一般使用px作为单位
　　height:可以用来修改图片的高度,一般使用px作为单位。宽度和高度两个属性如果指设置一个,另一个也会同时等比例整大小
如果两个值同时指定则按照你指定的值来设置，一般不建议设置 width和 height
<img src="abc/1.gif" alt="这是一个" width="100px" height="100px" />
相对路径
当前资源所在目录的位置。./返回上一级
绝对路径
图片格式
JPEG (JPG)
　　JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明，一般使用JPEG来保存照片等颜色丰富的图片
GIF
　　GIF支持的颜色少,只支持简单的遗明,支持动态图，图片颜色单一或者是动态图时可以使用gif
PNG
　　支持的颜色多,并且支持复杂的透，可以用来显示颜色复杂的透明的图片
图片的使用原则:
　　效果不一致,使用效果好的，效果一致,使用小的

12.meta标签
属性
name：对content的一描述。author，description，keywords，generator，revised，others
content：关键字,可以不止一个
<meta name="keywords" content="HTML5,JavaScript,前端" /> 设置网页的关键字
<meta name="description" content="发布HTML5,JavaScript,前端相关信息" /> 指定网页的描述，搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这俩个不会影响在搜索引擎中的排名
<meta http-equiv="refresh" content="秒数;url=目标路径" /> 请求重定向

13.内联框架
在一个页面中引入另一个页面。<iframe></iframe>，一般不推荐，搜索引擎不回去检索
<iframe src="目标地址" name="tom" width="" height=""> </iframe>
14.超链接
从一个页面跳转到另一个页面。
　　href: 跳转的目标地址，可以是一个相对路径，也可是绝对路径。地址为#自动跳转当前顶部，#id去往id所在位置。mailto:邮件地址，计算机中默认邮件客户端，并将收件人设置为mailto后的邮件地址。
　　 target：指定打开链接的位置。
　　　　　　 _self:当前窗口，默认值。
　　 　　　　_blank：新窗口。
　　 　　　　可为内联框架name的值，即为在同name的内联框架打开。
　　 　　　　 <a href="" target=""></a>
HTML中所有标签都可以有id属性，作为标签的唯一标识，一个页面中id值不可以重复。
15.<em><em/>表示一段内容中的着重点。通常显示为斜体
　<strong><strong/>表示一个内容的重要性。 通常显示为粗体
　二者可以单独使用，也可以一起使用
　 <strong>警告：任何情况下不要接近僵尸。</strong>
　他们只是<em>看起来</em>很友好？
16<b></b> 标签中内容加粗显示，无任何语义
　 <i></i> 标签中内容斜体显示，无任何语义
　<u></u> 标签中内容下划线显示，无任何语义
17<smal></smal>:标签中内容比父元素文字小一些，经常用来表示一些细则，例如版权声明等
18.<cite></cite>:指明对某内容的引用或参考。例如，戏剧，文章，图书的标题，歌曲电影等
　 <cite>《七龙珠》</cite>讲的是召唤神龙的故事。
19.<q></q>表示一个短的引用（行内引用） ，q标签引用的内容，浏览器会默认加上引号
　<blockquote></blockquate>长引用，（块级引用）
　 子曰：<q>学而时习之不亦说乎！</q>

   <div>
     子曰：
        <blockquote>
            有朋自远方来，不亦说乎！
         </blockquote>
    </div>

20.<sup></sup> 设置一个上标
21. <sub></sub> 设置一个下标
22. <del></del> 表示删除一个内容，标签中的内容会自动添加删除线
23. <ins></ins> 表示插入一个内容，标签中的内容会自动添加一个下划线
24. <pre></pre> 页面中需要直接编写一些代码，pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
25. <code></code> 专门用来表示代码，pre，code一般结合使用

     <pre>
     		<code>
     		  	window.οnlοad=function(){
     		  			alert("Hallo,World");
     		  	};
     		  </code>
     </pre>

26.列表标签列表只见可以互相嵌套
①无须列表<ul></ul>,使用<li></li>创建一个个列表项，一个li就是一个列表项。二者都是块元素。
通过type属性可以修改项目符号，disc(默认) square circle，默认的项目符号一般不使用。 每个浏览器样式不统一，去掉默认 css中设置一个样式，ul{list-style：none；}。若需要项目符号，可采用为li设置背景图片的方式设置。
②有序列表与无须类似，<ol></ol>代替ul，也是块元素
type属性指定项目符号类型罗马数字（默认）a A
③定义列表用来对一些词汇或内容进行定义，<dl></dl>有俩个子标签，dt：被定义的内容；dd：对定义内容的描述。

<ul>	
	<li>鱼香肉丝
		<ol>
			<li>鱼香</li>
			<li>肉丝</li>
		</ol>
	</li>	
	<li>宫保鸡丁
		<ul>
			<li>宫保</li>
			<li>鸡丁</li>
		</ul>
	</li>
	<li>青椒肉丝
		<dl>
			<dt>青椒</dt>
			<dd>一种很辣的蔬菜</dd>
			<dt>肉丝</dt>
			<dd>一般采用猪肉，切成条状</dd>
		</dl>
	</li>
</ul>

27=表格
<table></table>使用table标签来创建一个表格,tr来表示表格中的一行,有几行就有几个tr,tr中需要使用td来创建一个单元格，有几个单元格就有几个td。rowspan用来设置纵向的合并单元格，colspan用来设置横向的合并单元格.th标签来表示表头中的内容，它的用法和td一样，不同的是它会有一些默认效果加粗居中。
属性：
　　　border- spacing:table和td边框之间默认有一个距离,设置这个距离。 border-spacing:0px ;
　　　border- collapse可以用来设置表格的边框合并。如果设置了边框合并，则border-spacing自动失效。border-collapse: collapsep;

tr:hover{
background-color: #ff0; 
／／表格被选中时变化
}
tr:nth-child(even) {
background-color: #bfa;
／／表格奇数行背景颜色
｝

长表格：将表格分为三个部分，表头，表格的主体，表格底部。三个标签:thead表头tbody表格主体tfoot表格底部。这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
　　　thead中的内容，永远都会显示表格的顶部
　　　tfoot中的内容，永远都会显示表格的底部
　　　tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody,浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素。通过table > tr无法选中行需要通过tbody > tr
以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格。不推荐，维护性差

代码

28.表单：
表单的作用就是用来将用户信息提交给服务器的.比如:百度的搜索框注册登录这些操作都需要填写表单
<form></form>标签创建一个表单，必须指定一个action属性，该属性指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址。<form action="target . html">
使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项。
表单项：
a)文本框：
使用input来创建一一个文本框， 它的type属性是text.如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性,name表示提交内容的名字。用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器：url地址?查询字符串
格式：属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
用户名<input type="text" name="username" Value="我是value" />

b)提交按钮：
提交按钮可以将表单中的信息提交给服务器。使用input创建一个提交按钮，它的type属性值是submit
在提交按钮中可以通过value属性来指定按钮上的文字
<input type= "submit" value="注册” />
c)密码框:
使用input创建-一个密码框，它的type属性值是password
密码<input type="password" name="passwordl" />

d)单选按钮
使用input来创建一个单选按钮，它的type属性使用radio
　　　　-单选按钮通过name属性进行分组，name属性相同是一组按钮
　　　　-像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
性别<input type="radio" name= " gender" value="male" />男
<input type="radio" name=" gender" value= "female" />女

e)多选框
-使用input创建一个多选框，它的type属性使用checkbox
如果希望在单选按钮或者是多选框中指定默认选中的选项，则可以在希望选中的项中添加checked= "checked"属性
　　爱好<input type="checkbox" name="hobby" value="zq" />足球
　　　　<input type='checkbox" name= "hobby" value="lq" />篮球
　　　　<input type='checkbox" name="hobby" value="ymq" />羽毛球
　　　　<input type='checkbox" name= "hobby" value="ppq" />乒乓球

f)下拉列表
-使用select来创建一个 下拉列表
下拉列表的name属性需要指定给select,
而value属性需要指定给子标签option。 在下拉列表中使用option标签来创建一个一个列表项 ,可以通过在option中添t加selected="selected"来将选项设置为默认选中
当为select添加一个multiple=“multiple”，则下拉列表变为一个多选的下拉列表

你喜欢的明星<select name="star">　
　　　　　　　<option value="fbb" >范冰冰</option>
　　　　　　　<option value="lxr">林心如</ option>
　　　　　　　<option value="zbs" >赵本山</option>
</select>
在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组，可以通过label属性来指定分组的名字
<optgroup label="女明星">
　　　　<option value= "fbb">范冰冰</option>
　　　　<option value="lxr"> 林心如</option>
　　　　<option value= " zw">赵薇</ option>
</ optgroup>
<optgroup label="男明星">
　　　　<option value="zbs" selected="selected">赵本山</option>
　　　　<option value= "1dh">刘德华</ option>
　　　　<option value= "pcj">潘长江</option>
</optgroup>
g)文本域：
使用textarea创建一个文本域，宽高在css中设置

自我介绍<textarea name="info"></textarea>

h)重置按钮
点击重置按钮以后表单中内容将 会恢复为默认值
<input type="reset" />可以创建一个重置按钮，
l)单纯按钮：
创建一一个 单纯的按钮，这个按钮没有任何功能，只能被点击。js中会用
<input type="button" value="按钮" />

29.<button></button>
除了使用input，也可以使用button标签来创建按钮,这种方式和使用input类似，只不过由于它是成对出现的标签,使用起来更加的灵活
<button type="submit">提交</button>
<button type="reset">重置</button>
< button type="button" >按钮< /button>
30<label></label>
在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的label标签
该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
<label for="um">用户名</label>
<input id="um" type= "text"name="username" />
31<fieldest></fieldset>
在表单中可以使用fieldset来为表单项进行分组，可以将表单项中的同一组放到一个fieldset中
在fieldset可 以使用legend子标签，来指定组名
<fieldset>
<legend>用户信息</legend>
</fieldset>
32.框架集：
框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个，在h5标准中，推荐使用框架集，而不使用内联框架。
<frameset></frameset>使用frameset来创建一一个框架集， 注意frameset不能和body出现在同一个页面中。所以要使用框架集，页面中就不可以使用body标签
属性:
　　　rows，指定框架集中的所有的框架，一 行一行的排列
　　　cols，指定框架集中的所有的页面，- -列一列的排列
这两个属性frameset必须选择一一个， 并且需要在属性中指定每一部分所占的大小
<frameset cols="50%，50%">数值：引入几个页面写几个
在frameset中使用frame子标签来指定要引入的页面，引入几个页面就写几个frame
</frameset cols="50%，50%">
　　<frame src="01. 表格. html" />
　　<frame src="02. 表格. html" />
</ frameset>
<frameset cols"30%，*， 30%"> 　　　*：除了俩个30%剩余的
frameset中也可以再嵌套frameset
< frameset>
　　　<frame src="01. 表格. html" />
　　　<frame src="02. 表格. html" />
　　　<frameset rows= "30% , 50%, *　"><!-- 嵌套一个frameset -->
　　　　　<frame src="04. 表格的布局. html" />
　　　　　<frame src="05. 完善clearfix. html" />
　　　　　<frame src="06.表单. html|" />
　　　</ frameset>
</ frameset>
frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，所以如果搜索引擎检索到的页面是一一个框架页的话，它是不能去判断里边的内容的．使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差，如果非得用建议使用frameset而不使用iframe．
33.id class 命名：
id class和文 件的命名规范
　　-命名时尽量使用英文，如果不会可以使用拼音,但是不要英文和拼音混用
命名格式：
　　驼峰命名法　-首字母小写，每个单词的开头字母大写　例子: aaaBbbCcc helloWorld
　　　　　　　　-也可以所有的字母都小写，单词之间使用或-链接　例子：aaa_ bbb_ CCC aaa- bbb-ccc

Manta__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端基础HTML
qq_40423104的博客
07-25 2041
****HTML笔记 一. HTML常用标签 1. 段落标签：p标签 <p></p> 格式：<p>这是一个段落标签</p> 用于将段落进行分段 举例： <p>拉布拉多又称寻回犬，是一种中大型犬类，是非常适合被选作经常出入公共场合的导盲犬或地铁警犬及搜救犬和其他工作犬的狗品种，因原产地在加拿大的纽芬兰与拉布拉多省而得名。</p> <p>拉布拉多猎犬有四种颜色，分别为：黑色、黄色、巧克力、米白色。最常见的是黑色，黄色。
HTML基础视频教程汇总
07-22
教程名称：HTML基础视频教程汇总课程目录：【】001-html概述【】002-常用标签与属性【】003-字体样式、列表、转义【】004-表格【】005-表单01【】006-表单02【】007-框架【】008-head、名词解释 资源太大，传百度...
全网最全HTML基础
a1085653724的博客
04-20 5061
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML基础
书启鸿蒙知秋枫
12-28 4540
HTML语言就是使用各种各样具有不同含义的标签对代码里的普通文字进行标注，让普通的文字具有自己特殊的含义。所以，各个标签到底具有哪些功能，就是我们需要学习的重点。注释标签结构标签超链接和图片标签列表标签表格标签表单标签'a'表示小写字母编号；'A'表示大写字母编号；'i'表示小写罗马数字编号；'I'表示大写罗马数字编号；'1'表示数字编号（默认值）start属性，这个属性值是一个整数，用来指定序号的开始值。尽管列表条目的序号可能不是数字顺序，但这个开始的顺序总是使用数字表示。
【HTML基础篇002】HTML之form表单超详解
周周の博客小屋
12-17 8485
文章目录 🌄一、form表单是什么 🌄二、form表单的属性 🌄三、input中的各种Type属性值 🌄四、文章目录 🌄一、form表单是什么 🌄二、form表单的属性 🌄三、input中的各种Type属性值 🌄四、标签
最全【HTML基础篇002】HTML之form表单超详解_html form表单
最新发布
2401_84187537的博客
05-04 1524
【代码】最全【HTML基础篇002】HTML之form表单超详解_html form表单。
HTML5、CSS、JS基础
qq_49101841的博客
03-03 2148
学习笔记
HTML & CSS 基础语法总结
立志成为一个前端、后端、测试全方位发展的程序员
07-13 3143
HTML 本文档适合前端初学者学习HTML时参考，个人总结，大佬勿喷~~~ 还可以看看答主另一篇关于MySQL的总结，超级适合初学者，传送地址：文章目录HTML一、网页的组成部分二、HTML简介三、创建HTML文件四、HTML文件的书写规范五、HTML 标签介绍六、常用标签介绍：1.font字体标签:2. 特殊字符：3.标题标签:4.超链接：网页中点击之后可以跳转的内容5.列表标签6. img标签(单标签)：可以在html页面上显示图片7. 表格标签8. 跨行跨列表格9. iframe框架标签(内嵌窗口)1
HTML基础（二）
weixin_52555162的博客
03-13 3454
这次要介绍的是块标签，行标签和行块标签，先来看看思维导图： 001：块标签 来看看块标签的大致结构框架： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w.
java基础002
热门推荐
u014163736的博客
04-29 4万+
试卷一2013年年底的时候，我看到了网上流传的一个叫做《Java面试题大全》的东西，认真的阅读了以后发现里面的很多题目是重复且没有价值的题目，还有不少的参考答案也是错误的，于是我花了半个月时间对这个所谓的《Java面试大全》进行了全面的修订并重新发布在我的CSDN博客。在修订的过程中，参照了当时JDK最新版本（Java 7）给出了题目的答案和相关代码，去掉了EJB 2.x、JSF等无用内容或过时内...
JavaWeb前端基础（HTML CSS JavaScript）
m0_63070489的博客
04-06 1230
前端基础（HTML CSS JavaScript）
002
03-29
【HTML基础】 HTML，全称为HyperText Markup Language，即超文本标记语言，是用于创建网页的标准标记语言。HTML文档由一系列元素组成，这些元素通过标签来定义，从而告诉浏览器如何展示网页内容。"002"可能代表一个...
b002
03-28
【HTML基础概述】 HTML，全称为HyperText Markup Language，即超文本标记语言，是用于创建网页的标准标记语言。HTML5是其最新版本，它在HTML4的基础上进行了许多改进和新增功能，以更好地适应互联网的发展需求。 ...
html登录页面login002.rar
09-09
HTML登录页面设计是Web开发中的基础模块，尤其在构建用户交互性强的网站时至关重要。"login002.rar"这个压缩包提供了一个基于HTML5的登录页面实例，它具有自适应设计，适用于不同设备，包括桌面、平板电脑和手机。这...
adriancoimbramariani002：网站com html e css
02-18
【HTML与CSS基础】 HTML（HyperText Markup Language）是网页制作的基础语言，它定义了网页的结构和内容。...在adriancoimbramariani002-master这个项目中，我们可以深入学习如何运用HTML和CSS来创建和美化一个网站。
012行高
Manta__的博客
03-14 470
顶线、中线、基线、底线 1.行高：是指上下文本行的基线间的重直距离，即图中两行红线间昏直距离。 2.行距：是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线的重直距离 3.半行距：是行距的一半，即区域3垂直距离/2， 区城1，2, 3, 4的距离之和为行高， 而区域1, 2, 4距离之和为字体size,所以半行距也可以这么算: (行高-字体size) /2 4.内容区：底线和顶线包裹的...
009两列布局，及商品列布局
Manta__的博客
03-14 397
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ min...
003css
Manta__的博客
02-19 391
CSS层叠样式表 A.可将css样式编写到标签（元素）的style属性中，“名：值”，多个之间用；隔开，称为内联标签，只对当前标签有作用。不方便复用。不方便后期维护，不推荐。 B.编写到head中的<style></style> ...
HTML表格基础教程：创建与美化
"HTML学习教程002(北大青鸟)主要涵盖了HTML中表格的基础知识，包括表格的构成、基本语法、边框设置、创建方法，以及跨行跨列的实现。" 在HTML中，表格是一种重要的布局工具，常用于展示数据和组织网页内容。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值