日报

hexo

发布日期: 2022-10-06

更新日期: 2023-03-03

文章字数: 1.2k

阅读时长: 5 分

阅读次数:

每日一记

1.什么是HTML

是扩展名，超文本标记语言(Hyper Text Markup Language)
不是编程语言而是由标签组成的标记语言

2.兼容性

查询网站
不同浏览器兼容性不一样，因此需要Web标准的制定
W3C万维网联盟

3.WEB组成部分

HTML:结构，由W3C制定标准和语法
CSS:样式布局
JS:触发行为

4.HTML基本语法

(1)常规标记/双标记
<标记属性=”属性值”>
</。。。>
(2)空标记/单标记
<标记属性=”属性值”/>

5.基本结构

<!DOCTYPE html 5>                     #文档说明标签（格式说明使用html5）
<html lang="en">                      #语言zh-CN/ja-jp/en（对网址翻译）
<head>
  <meta charset="UTF-8">              #编码ASCII/ISO-8859-1/GB2312/UTF-8
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

6.开发工具

Sublime Text，webstorm,HBuilderX,VScode
快捷键:选中文本alt+w添加< p >
ctrl+/注释
ul>li{内容}*n + 回车建立n个无序列表并加上内容
dl>dt{内容}+dd{内容} + 回车建立自定义列表并加上内容

7.基本标签

(1)标题标签
    <h1>一级标题最大</h1>
    <h6>最小六级标题</h6>
(2)段落文本标签
    <p>段落文本内容</p>
    段与段间有间隔
(3)水平线标签(同时更改颜色，长度，位置，关闭阴影)                       #注意一对标签的格式加/
    <hr color="green" width="600" align="left/right" noshade>
(4)文本修饰标签————加粗
   <b>普通加粗<strong>便于爬虫
(5)文本修饰标签————倾斜
   <em>或<i>
(6)文本修饰标签————删除
   <s>或<del>
(7)文本修饰标签————下划线
   <u>
(8)文本修饰标签————上下标
   <sub>/<sup>
(9)划分区域，占一行（破坏结构）
   <div>内容</div>
(10)独立修饰文本（不破坏结构）
   <span>内容</span>

8.特殊符号

尖角号      &lt;左    &gt;右
空格        &nbsp;受字体影响    &emsp;一个中文宽度
版权        &copy;©
商标        &trade; TM标签      &reg; R标签

9.列表

(1)有序
<!-- li里可以随意放标签，ol里只能放li，数字1.2.3.是自动生成的 -->
<ol type="A" start=""4>
    <li>
                             #type只能是1，a，A，i，I
    </li>                     start只能取一个数字1，2，3...
</ol>

(2)无序
<!-- ul里只能放li，li里随便放 -->
<ul type="none">
    <li>
                             #默认是黑色实心圆
    </li>                     type只能填disc，circle，square，none（取消）
</ul>
(3)自定义

<dl>
    <dt>文字或图</dt>         #只复制<dd><dt>是贴在一起的
    <dd>相关文字</dd>          复制<dl>则间隔一行
</dl>

10.图片

<img src="XXX">
(1)绝对路径（本地有此文件）
    直接填地址
(2)相对路径
    与html文件在同级目录下写             名字.gif  或者  ./名字.gif
    图片在下级则直接写地址
    图片在上级则先../返回上一级再接着写地址(每一个../都是一次返回上级)

#此处要注意：不同操作系统使用的斜杠不同（Linux系统是/  window系统都可以）

# 属性
<img src="" alt="">
(1)alt=（你告诉它要显示的）图片加载失败时的提示信息"
(2)title=标题（指针放上去后显示的）
(3)width="200px" height="200px"更改宽高         #px是像数值，只设置一个时会自动缩放

11.超链接(a链接)

<a herf="链接" title="鼠标悬停显示的信息" target="在何处打开文档">超链接放置的内容</a>  
(1)target="_self"      在默认值
(2)target="_blank"     在新窗口打开
(3)超链接赋予图片:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a herf="https://www.baidu.com" title="百度查询">
        <img src="图片地址" alt="">                          将图片包在超链接中
    </a>
</body>
</html>