HTML语法规范之标签

A-angular

已于 2024-05-10 10:21:21 修改

阅读量110

点赞数 3

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

于 2024-05-08 09:16:11 首次发布

本文链接：https://blog.csdn.net/weixin_58423780/article/details/138180208

版权

Java前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.标签类型简介

双标签：<html></html>、<head></head>、<body></body>

单标签：<br/> 

文档类型声明标签：<!DOCTYPE html>

2.常用标签

标题标签：<h1>-<h6>

段落和换行标签：<p></p>;<br/>

文本格式化标签：加粗<strong></strong>或者<b></b>、倾斜<em></em>或者<i></i>、
删除线<del></del>或者<s></s>、下划线<ins></ins>或者<u></u>
<div><span>无语义，盒子，装内容：<div>标签用来布局，但是一行只能放一个<div>大盒子；
<span>标签用来布局，一行上可以多个<span>小盒子

图像标签：<img src="图像URL"/>。标签其他属性：src、alt（替换文本，图片不显示的文字信息）、title(提示文本，鼠标移动到图像显示的文字)、width、height、border

注释和特殊字符：<!--  -->；空格：&nbsp；、小于号：&lt；、大于号：gt；等

列表标签：无序列表、有序列表和自定义列表
    1.无序列表*（<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的;<li>与</li>之间相当于一个容器，可以容纳所有元素）
    去掉Ii前面的项目符号（小圆点）：list-style:none;
<ul>
    <li>列表项1</1i>
    <li>列表项2</1i>
    <li>列表项3</1i>
    ...
</ul>
    2.有序列表（列表排序以数字显示）
<ol>
    <li>列表项1</1i>
    <li>列表项2</1i>
    <li>列表项3</1i>
    ...
</ol>
    3.自定义列表（自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号；①<dl></dl>里面只能包含<dt>和<dd>②<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>）
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</d1>

表单标签：（表单成分：表单域、表单控件（也称为表单元素）、提示信息）
    1.表单域（包含表单元素的区域）:
    <form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
    </form>
    2.表单控件【1.input输入表单元素2.select下拉表单元素3.textarea文本域元素】
    ①<input type="属性值"/>【type属性值：text文本、password密码、checkbox复选框、radio单选按钮、submit提交按钮、reset重置按钮、button普通按钮（结合js搭配使用）、file文件域】
    input标签属性：
 name（单选按钮和复选框要有相同的name值），自定义值，定义input元素的名称；
 value，自定义值，规定input元素的值；
 checked，值checked，规定此input元素首次加载时应当被选中；
 maxlength，正整数，规定输入字段中的字符的最大长度；
    ②label<label>标签为input元素定义标注（标签），用于绑定一个表单元素,当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验
    label中for属性和相关元素的id属性相同
      <label for="sex">男</label>
      <input type="radio" name="sex" id="sex"/>
    ③select标签属性：（1.<select>中至少包含一对<option>2.在<option>中定义selected="selected"时，当前项即为默认选中项）
     <select>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
      ...
     </select>
    ④textarea文本域属性：
     <textarea rows="3" cols="20">文本内容</textarea>

超链接标签：<a href="跳转目标" target="目标窗口的弹出方式（_self为默认值，
_blank为新窗口打开）">文本或图像</a>
链接分类：
    1、外部链接:例如<a href="http:// www.baidu.com">百度</a >；
    2、内部链接:网站内部页面之间的相互链接.直接链接内部页面名称即可，
例如<a href="index.html">首页</a>
    3、空链接：如果当时没有确定链接目标时，<a href="#">首页</a>；
    4、下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
    5．网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接；
    6、锚点链接：点我们点击链接，可以快速定位到页面中的某个位置
      【在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>；找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第2集介绍</h3>】

表格标签（table标签表格属性：align、border、cellpadding、cellspacing、width等，通常css设置）：
在表格标签中，分别用：<thead>（内部必须有<tr>标签）标签表格的头部区域、<tbody>标签表格的主体区域
<table>
    <tr>
        <td>单元格文字</td>【<th>表头单元格，文字居中加粗】
        ...
    </tr>
    ...
</table>
    合并单元格：跨行合并：rowspan="合并单元格的个数"；跨列合并：colspan="合并单元格的个数"
    步骤: 
        1．先确定是跨行还是跨列合并。
        2.找到目标单元格，写上合并方式=合并的单元格数量。比如：<td colspan="2"></td>。
        3．删除多余的单元格。