欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML基本标签

程序员文章站 2022-07-02 21:12:04
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页 HTML基本标 ......

html 是用来描述网页的一种语言。
html 指的是超文本标记语言 (hyper text markup language)
html 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
html 使用标记标签来描述网页

html基本标签

<!doctype html>

html5中<!doctype html>相当于让浏览器以标准模式解析渲染页面，如果你的页面没有doctype的声明，那么默认就是以怪异模式去渲染解析，那么，在不同的浏览器就会显示不同的样式。
<!doctype> 声明必须是 html 文档的第一行，位于 标签之前。

<html> 与 </html>

<html>与 &lt/html>标签限定了文档的开始点和结束点，其中由<head>和<body>标签组成。

<head>与</head>

<head>与</head>定义html文档的头部，里边的内容并不会给读者显示，只是描述了文档的各种属性和信息，包括文档的标题、在 web 中的位置以及和其他文档的关系等。例如引入css文件。

<body>与</body>

<body>与</body>中存放文档的主体内容，用来显示给读者。

<meta>

<meta> 标签永远位于 head 元素内部。
meta标签共有http-equiv和name两个属性。

<meta name="keywords" content="内容">//这里的content的值中写网站的相关关键字，用来给搜索引擎去搜索。
<meta name="description" content="内容">//这里的content的值写一些网站的相关介绍，一段描述性的话。
<meta http-equiv="refresh" content="2;url=https://www.baidu.com"> //指网页打开后经过2秒刷新到url指定的页面，不填url默认为原打开的网页
<meta http-equiv="content-type" charset=utf8">//编码方式

<title>与</title>

<title>与</title>中的内容显示在浏览器窗口的标题栏或状态栏上，用来定义文档的标题。

<link>

<link>标签用来连接外部资源。

<link rel="icon" href="    .ico">用来定义浏览器窗口的标题栏或状态栏上的图标。
<link rel="stylesheet" type="text/css" href="theme.css" />连接样式表

<hn>与</hn>

标题标签，n可以为1-6.

<p>与</p>

段落标签，是块级标签

<b>与</b>

加粗文本

<del>与</del>

表示删除文本，例如<del>这里是删除</del>会显示为这里是删除

<ins>与</ins>

下划线文本，例如<ins>这里有下划线</ins>会显示为

<br>

插入一个换行符

<hr>

插入一条水平线

<div>与</div>

<div>就像是一个盒子，限制了一块区域，里边可以存放其他内容，是块级标签，一般用来通过css定义样式

<span>与</span>

<span>和<div>类似，但它是一个内联标签。

<img>

img用来插入图片，有很多属性

<img src="url"  alt="图片未加载成功显示的文本"  title="鼠标悬浮时显示的文本" width="300px" height="400px">

<a>

超链接标签或者为锚标签

<a href="https://www.cnblogs.com/" target="_block">博客园</a>//target="_block以一个空白页打开
<a href="#id">博客园</a>//跳转到id为id的锚

<ul>

无序列表

<ul>
　　<li>列表项</li>
　　<li>列表项</li>
　　<li>列表项</li>
</ul>

<ol>

有序列表

<dl>

定义列表

<dl>
 <dt>标题</dt>
   <dd>内容</dd>
   <dt>标题</dt>
   <dd>内容</dd>
</dl>

<table>

表格标签

<table border="1">
  <tr>
    <th>month</th>
    <th>savings</th>
  </tr>
  <tr>
    <td>january</td>
    <td>$100</td>
  </tr>
</table>

th为表头，td为单元格，tr定义表格行
属性有
border 定义表格边框宽度
cellpadding 规定单元边沿与其内容之间的空白
cellspacing 规定单元格之间的空白
width 表格宽度
等。。

<form>

属性

表单标签，用于接收用户的输入，完成与后端的传输
action属性规定当提交表单时向何处发送表单数据，值为url
method属性规定用于发送 form-data 的 http 方法。
　　get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制
　　post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

元素

<input>

属性：type：
　　　　　text 文本输入框
　　　　　password 密码输入框
　　　　　radio 单选框
　　　　　checkbox 多选框
　　　　　submit 提交按钮
　　　　　button 按钮
　　　　　file 提交文件：form表单需要加上属性enctype=”multipart/form-data”，请求方式必须是post
　　　　　reset 刷新表单，重置表单
　　 name：表单提交的键名，如一套多选框或单选框的name应该一样
　　 value：表单提交的值
　　 checked: 默认被选中
　　 readonly： 将表单内容设置为只读，即不能修改，但可以选择，可以复制，用于text或password
　　 disabled：表示禁用该input元素

<select>　　

下拉选项

<select>
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="天津">天津</option>
  <option value="广州">广州</option>
</select>

属性：name：键名
　　　size：显示的选项个数
　　　multiple：多选
　　　option中selected属性表示默认被选中

<textarea>　

文本域
属性：name：键名
　　　rows：行数
　　　cols：列数

<label></label>　

为input元素定义标记
其中for属性可以指定id，表示与其绑定，点击lable中的内容，会自动转移到绑定的元素中

<fieldset></fieldset>　

为表单元素分组

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

显示为
HTML基本标签

赞 (0)
打赏 HTML基本标签 微信扫一扫

相关文章:

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

发表评论

HTML基本标签
验证码： HTML基本标签

上一篇： 团队合作前端书写习惯总结

下一篇： 华为HR胡玲实名投诉事件

推荐阅读