HTML标签(笔记)

1. 文档类型<!DOCTYPE>

<!-- 写在页面最前面 -->
<!DOCTYPE html>

2. 语言类型

<!-- 指定html语言的种类 en英语 zh-CN汉语-->
<html lang='en'>

3. 字符集

<!-- 一般情况下统一使用 "UTF-8" 编码,不要写成 "utf-8" 或 "utf8" 或 "UTF8"-->
<meta charset="UTF-8" />

4. HTML骨架标签

<html>
    <head>
        <title></title>
    </head>
    <body>
 	
    </body>
</html>

5. 标题标签

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

6. 段落标签 p

7. 换行标签 br

8. 水平线标签 hr

9. div标签和span标签

span一般用于单行文本

10. 文本格式化标签

<!-- 推荐的更有语义化 -->
<!-- 文字加粗(推荐使用strong) -->
<b></b><strong></strong>
<!-- 文字斜体(推荐使用em) -->
<i></i><em></em>
<!-- 文字加删除线(推荐使用del) -->
<s></s><del></del>
<!-- 文字加下划线(推荐使用u) -->
<u></u><ins></ins>

11. 图像标签 img

<img src='' alt='' title=''></img>
<!-- 
	src:指定图片的路径,有相对路径和绝对路径
	alt:当图片不存在时,展示里面的内容
	title:鼠标悬停时的内容
	也可以设置width,height,border
-->

12. a标签

<!-- 
	target属性
		_self:当前页面打开
		_blank:新窗口打开,如果一直重复点会一直新窗口打开 
		乱写:新窗口打开,如果一直点不会重复打开只会打开一次
-->
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

13. 锚点定位

<!-- #id名 -->
<a href='#box'>点击跳转</a>
<!-- 起id名 -->
<div id='box'>
    我是将要被跳转的内容 
</div>

14. base标签

全局设置a标签打开的方式,在head中写,如果a标签中已经写了遵循a标签的打开方式

15. pre标签

pre 标签包裹的代码里面的格式会在页面直接展示出来

16. 表格标签

<!-- 
	表格标签的大致结构 
	caption:表格标题

	thead:表示表头
	tbody:表示内容
	tfoot:表示表底

	tr:表格行
	td:单元格
	
	th:单元格,默认加粗,居中
-->
<table>
    <caption>
    	我是标题
    </caption>
    <thead>
    	<tr>
        	<td></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
        	<td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tfoot>
</table>

<!-- 
	table属性 
		width,height,border,align
		宽,高,边框,摆放位置

		cellspacing:边框的间的间距默认2px
		cellpadding:内容
		
		rowspan:跨行合并
		colspan:跨列合并
		可以理解为你写多少 td 就占多少个单元格
-->

17. 列表标签

  • 无序列表

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
  • 有序列表

    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    
  • 自定义列表

    <dl>
        <dt>自定义标题</dt>
        <dd>内容</dd>
        <dd>内容</dd>
        <dd>内容</dd>
        
        <dt>自定义标题</dt>
        <dd>内容</dd>
        <dd>内容</dd>
        <dd>内容</dd>
    </dl>
    

18. 表单标签

  • 表单域

    from表单,一般情况下其他表单相关元素都是它的后代元素

    属性 
    	action 用于提交表单数据的请求,默认不写从当前路径进行提交
    		在输入框中添加name属性可以拼接路径(name中的值=输入框中的内容)
    	method 请求方法(get和post),默认是get
    	target 和a元素的target一样
    	enctype 
    	accept-charset 规定表单提交时使用的字符编码
    
  • input

    <!-- 
    	input
    	 	属性 type
    			属性值 text       单行文本输入框
    				  password	 密码输入框
    				  radio		 单选按钮
    				  checkbox   复选框
    				  button	 普通按钮
    				  submit	 提交按钮,提交数据
    				  reset		 重置按钮,重置from表单中的数据
    				  image		 图像形式的提交按钮
    				  file		 文件域,可以展示图片(...)
    		属性 name 
    			单选框:由控件的名称,单选框需要设置相同的name属性
    			输入框:提交数据时需要带上name,用于提交数据的key
    		属性 value 
    			input控件中的默认文本值
    		属性 step
    			增长步数
    		属性 size
    			控件的尺寸
    		属性 checked 
    			默认选中项
    		属性 maxlength
    			输入的最大字符
    		属性 placeholder (h5)
    			默认文字,只是起到提示作用(只能看不能用)
    		属性 multiple
    			文件多选
    		属性 accept
    			文件类型
    -->
    <input type="text" name="aaa" value="aaa" size="" checked maxlength="10">
    
  • label

    通过for绑定input的id(for中不需要加#号),绑定后点击label中的文字也可以使对应input聚焦

  • textarea

    多行文本框,可拉伸

    属性:rows,cols设置默认行和列

    默认value中的内容,是直接写在标签里面

  • select、option

    <!-- 下拉选择框 属性:selected默认选择 -->
    <select>
        <option></option>
        <option selected></option>
        <option></option>
    </select>
    
  • button 按钮

19. 特殊字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jAbEynX9-1640231048440)(..\00-imgs\image-20211206164817443.png)]

20. 注意写路径最好用 \ 不要用 /

linux

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值