HTML

最新推荐文章于 2024-10-16 20:49:18 发布

小牧要学习

最新推荐文章于 2024-10-16 20:49:18 发布

阅读量122

点赞数 4

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/muhaokai/article/details/115656631

版权

前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本概念，包括超文本、标记和语言的定义，以及HTML的初始化代码。详细讲解了HTML的基础标签，如加粗、倾斜、标题、换行、字体、段落、图片、链接等，并涉及转义字符、列表和表格的使用。同时，提到了链接标签的属性和表单元素的应用。此外，还讨论了解决乱码的方法和一些注意事项。

摘要由CSDN通过智能技术生成

HTML

1．什么是 HTML ？

html 超文本标记语言（HyperText Markup Language）

超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

2.HTML超文本标记语言

超文本：文本内容+非文本内容（图片、视频、音频）

标记：<单词> 也叫标签

语言：编程语言

标记也叫作标签：单标签 <br /> 双标签<html></html>

3、HTML初始化代码

<!DOCTYPE html>  <!--版本声明-->
<html>
<head>
     <meta charset="utf-8">      <!--语言-->
     <title>学习网页</title>
</head>

<body>
    内容区
</body>

</html>

【乱码解决】
1、用记事本打开，另存为-》文档类型（.）-》更改编码
2、<meta charset=“UTF-8”/>

【注意】1、标签不能交叉
  	   2、html不区分大小写，建议使用小写
       3、html拓展名：.html、.htm、.php、.jsp、.asp

二、HTML 标签

1.基础标签

加粗：<b></b> <strong></strong>
倾斜：<i></i> <em></em>
删除线:<del></del>
下划线:<ins></ins>
上标:<sup></sup>
下标：<sub></sub>
缩写：<abbr title=""></abbr>
标记：<mark></mark>
文本：<span></span>
标题：<h*>标题标签</h*> h1-h6:从小到大的标题标签
换行:<br />
字体标签：<font></font> 属性：color、size、face
段落标签：<p></p>

<base>HTML文档中所有的链接标签的默认链接，
<link> 标签通常用于链接到样式表:
meta标签描述了一些基本的元数据

2.常用标签

水平线： `<hr />`

属性：width:长度（px|%）、align：水平位置(left 左|center 中|right 右）、 color：线的颜色、 size：粗细（px）

图片标签: <img>

属性：src 引入图片地址、alt 替换文本、 title 提示信息、width 宽、height 高

滚动标签 : `<marquee>滚动字幕</marquee>`

属性：direction：方向（left、right）
     behavior：滚动方式（scroll、slide、 alternate）
     scrollamount：速度，值是正数默认为6
     scrolldelay：时间，值是正数默认为0。单位毫秒
     onmouseover="stop()" ：鼠标悬浮停止移动
     onmouseout="start()"：鼠标离开开始移动

框架整合 `<frameset></frameset>`

iframe内联框架 `<iframe></iframe>`

属性：width  宽
     height  高
     scrolling  规定是否在框架中显示滚动条
     src  规定在iframe中引入的URL

三、链接标签

链接标签： <a href="url"> </a>

属性：href   地址： 
     target 目标位置
     target属性值：blank:新窗口打开,new：新窗口打开,top:顶级窗口打开

<a> 标签：

1）打开外部文件

<a href="http://www.baidu.com">百度一下</a>

2）打开内部文件

<a href="test1.html">test1文件</a>

3）打开一张图片

 <a href="images/tulips.jpg">打开一张图片</a>

4）书写简单的javascript

 <a href="javascript:alert('这是一个弹框！')">提示框</a>

四、转义字符

< 等同于 <

> 等同于 >

  等同于空格

五、表

1.有序列表：

属性：type:序号类型、start：起始序号、reversed：倒序

语法：
<ol>
    <li></li>
</ol>

2.无序列表：

属性：type:序号样式（disc 实心圆|circle 空心圆|square 实心方框）

语法：
<ul>
    <li></li>
</ul>

3.自定义列表：

语法：
<dl></dl> <dt></dt> <dd></dd>

4.表格标签 <table></table>

行 tr--(列 td)

属性：border：表格边框
	  rowspan:合并行（竖着合并）
	  colspan  :合并列（横着合并）

4.1.table布局

优点：比较简单，容易理解

缺点：对于复杂的布局，表格嵌套太多，比较繁琐；后期维护和修改很不方便

5.表单 form

ation   提交目的地路径
method   提交方式（get-->明文提交，post-->打包提交）
	get-->明文提交-->提交后通过键值对的形式存储，通过name去拿value

5.1. input 标签

文本框  input type="text"    value--返回值  name--input的名字
密码框 input type="password"

单选框 input type="radio"   value  返回值
 	name="sex"（name相同） checked 默认  label  for=""   关联到input
复选框 input type="checkbox"  value  返回值

提交按钮    input type="submit"     value="提交"  （提交到ation 路径）
下拉选框  select(键-name)--option(选项)(值-value)