HTML

学习记录
102 阅读2分钟
  • 查看各大浏览器的兼容性问题 (https://caniuse.com/)
  • 网页组成部分
    • HTML 结构
    • CSS 表现
    • JS 行为

基本语法

  1. <常规标记> 双标记
  2. <空标记> 单标记

文档声明与字符编码

<!DOCTYPE html>
<html lang="en">
<!-- lang:html包含的语言 ; 包含: en是英文 zh-CN中文 ja-jp日文 ; 作用: 告诉浏览器界面的语言 进行与系统比较 -->
<head>
	<meta charset="UTF-8">
	<!-- 字符集:告诉接收方接收方,用这个进行解码; 字符集包含:ASCll美国信息交换码 ISO GB2312 UTF-8... -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

语义

  1. 语义化: 爬虫方便，便于浏览器推前；方便维护

常见标签：

文本标签

  • h1-h6(从大到小)
  • 自带加粗
  • 有自己的文本大小
  • 独占一行
  • 默认间距
  • h1只使用一次

段落标签

  • <p></p>
  1. 段落段落之间有间距

换行标签

  • <br/>
  1. 强制换行

水平线

  • <hr/>

修改样式

  • <hr color="yellow" width="300px" align="left">
  • <hr noshade>
  1. 去除阴影
  2. 前后值一致可以写成一个

加粗

  • <b></b>
  • <strong></strong> 推荐，更具有强调性

倾斜

  • <em></em> 推荐
  • <i></i>

删除线

  • <s></s>
  • <del></del> 推荐

下划线

  • <u></u>

上标 下标

  • <sup></sup>
  • <sub></sub>

快捷键

  • shift+alt+箭头 复制一行

特殊符号

符号含义
&lt;左尖角号
&gt;右尖角号
&nbsp;空格
&emsp;空格，占1个中文宽度
&copy;版权
&trade; &reg;商标

div span

div

  • 划分页面的区域
  • 快捷方式：div{内容}*几个
  • 默认的属性
    1. 没有具体含义
    2. 用来划分页面区域
    3. 独占一行

span

  • 没有实际意义
  • 文本独立修饰时，内容有多宽就占用多宽的空间距离

列表

  • li内可以随意放标签
  • ol内只能放li

无序列表

  • 标识 type: disc
    1. disc 默认黑色实心
    2. square 正方形黑实心
    3. none 没有
<ul>
	<li>无序列表</li>
	<li>无序列表</li>
</ul>

有序列表

  • 自动生成：数字标识的列表
  • 更改标识：type：1, a, A, i, I
  • 标识从第几个开始：start:数字
<ol type='1' start='3'>
	<li>有序列表</li>
	<li>有序列表</li>
</ol>

自定义列表

<dl>
	<dt>我是图片</dt>
	<dd>我是文字</dd>
</dl>

图片标签的路径

  • <img src=''>

同级目录

  • 上一级../
  1. code.gif => http协议
  2. ./code.gif

绝对路径

  1. F:\XXX\XXX\XXXX\code.gif => file协议

图片标签属性

image.png

  • 若只设置高度/宽度,会自动缩放,不至于让图片失真

超链接

image.png

  • <a href='https://www.baidu.com'></a>
  • 未点击过为蓝色,点击过后为紫色
  • 注
    • 默认在当前页面中打开 target='_self'默认值 '_blank'新窗口打开

表格

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<table>
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>4</td>
		</tr>
	</table>
</body>
</html>

属性

  1. border='number' 边框
<body>
	<table border="1">
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>5</td>
			<td>6</td>
		</tr>
	</table>
</body>
avatar
文章
阅读
粉丝