前端与HTML|青训营笔记

用户6838051846794

2022-08-23 52 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的的第1天

HTML

HTML是超文本标记语言。其主要语法格式为标签名，属性名，属性值。浏览器会将HTML代码解析成DOM树，每个HTML代码节点就是一个DOM节点。

语法

建议标签、属性小写（各种框架如react等的标签用大写）
空标签可不闭合，如input，meta
属性值推荐用双引号包裹
某些属性值可省略，只写属性，如required，readonly

标签

标题标签

<h1>内容<h1> 一共六级（h1-h6）,数字越大，字越小

段落标签

<p>内容<p> 将文本划分成段落

列表标签

无序列表：

 <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>
</dl>

链接标签

<a href="" target="_self">内容</a>

href: 链接目标的url地址
target: 用于指定页面的打开方式， _self 为默认值， _blank 为在新窗口中打开方式。

内部链接：网站内部页面之间的相互链接。
锚点链接：快速定位到页面某位置。
空链接: 无对应内容。

图像标签

<img src="" alt="" title="" height="" border="">

src: 指定图像文件的路径和文件名；
alt: 替换文本,图像显示不出来的时候用文字替换；
width: 给图像设置宽度；
height: 给图像设置高度；
title: 提示文本,鼠标放到图像上时出现提示文字；
border: 给图像设置边框。

文本格式化标签

<b>加粗标签<b>

<em>倾斜标签<em>

<del>删除标签<del>

<ins>下划线标签<ins>

<blockquote>块引用<blockquote> 引用别人一段话

<cite>短引用<cite> 关键字引用作品名字等

<q>短引用<q> 引用短的内容,讲过的话等

<code>代码<code> 代码块

<strong>强调<strong> 意思上的,更严重更紧急

<em>强调<em> 语气上的，一段话上重读

常用标签

<div>内容<div> 该标签单独占一行。

<span>内容<span> 一行可以放很多此标签。

<body>内容<body> 内容为主体。

<br/> 换行标签。

<audio src=""> 音频标签

<video src=""> 视频标签

<input> 输入标签, 有很多type例如range number date checkbox radio

<textarea> 多行输入标签

<select> <option> 下拉标签

特殊字符

空格：&nbsp

小于：&lt

大于：&gt

&：&amp

人民币：&yen

语义化

语义化是什么

HTML中的元素、属性及属性值都拥有某些含义开发者应该遵循语义来编写HTML eg:有序列表用 ol;无序列表用 ul lang 属性表示内容所使用的语言

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性