前端与HTML ｜ 青训营笔记

Sanfer
496 阅读10分钟

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

HTML

标签的语法

  1. 标签由英文尖括号 < 和 > 括起来，如<html>

  2. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个 / 。比如<div></div>

  3. 结构：开始标签 标签内容 结束标签

  4. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。

  5. HTML不区分大小写，但建议小写，自定义组件一般大写。

html5文档结构

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>标题</title>
        </head>
        <body>
            主体
        </body>
    </html>

  1. <!DOCTYPE html>
    文档类型声明，表示该文件为 HTML5文件。

  2. <html></html>标签对
    用来标识HTML文档的开始和结束，这两个标签对成对存在，中间的部分是文档的 头部head 和 主体body。

  3. <head></head>标签对

    包含有关HTML文档的信息，可以包含一些辅助性标签。

    <head></head>双标签：表示头部标签，通常用来嵌套<title></title>，<link/>，<meta/>，<style></style>，<script></script>等标签，但是浏览器除了会在标题栏显示元素的内容外，不会向用户显示head元素内的其他任何内容。

    <title>标签对：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。

    <meta charset="UTF-8">：设置当前文件字符编码。许多<meta>元素包含了 name 和 content 属性：

     name：指定了meta元素的类型；说明该元素包含了什么类型的信息。
 content：指定了实际的元数据内容。

    指定作者name="author" content="作者名"：如果你需要联系页面的作者，问一些关于页面内容的问题。一些内容管理系统能够自动获取页面作者的信息，然后用于某些用途。

    指定包含关于页面内容的关键字的页面内容的描述name="description" content="页面描述"：可能或让你的页面在搜索引擎的相关的搜索出现得更多（搜索引擎优化）。

    <style></style>标签对：双标签中设置当前文件样式

    <link rel="icon" href="favicon.ico" type="图片路径">：网页图片

  4. <body></body>标签对

    它是HTML文档的主体部分。在此标签中可以包含<p><h1><br>等众多标签，在网页上要展示出来的页面内容一定要放在body标签中。

  5. html文件注释：<!-- 注释文字 -->

标签

语义化标签

  1. 段落标签：<p>段落文本</p>

    一段文字一个<p>标签; 标签的默认样式：段前段后都会有空白

  2. 标题标签：<hx>标题文本</hx> (x为1-6)

    h1、h2、h3、h4、h5、h6分别为一级、二级、三级、四级、五级、六级标题，并且依据重要性递减。<h1></h1>是顶级标题（一般一个页面只使用一次）。 对网页建立索引的搜索引擎将标题的内容视为影响网页搜索排名的重要关键字。没有标题，网页在SEO（搜索引擎优化）方面效果不佳。

  3. 页眉：<header>头部区域</header>

  4. 导航栏：<nav>

  5. 主内容：<main>

    存放每个页面独有的内容。每个页面上只能用一次<main>，且直接位于<body>中。最好不要把它嵌套进其它元素。

    主内容中还可以有各种子内容区段，可用<article>、<section>和<div>等元素表示。

    <article>包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。

    <section>适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。

  6. 侧边栏：<aside>侧边栏区域</aside>，经常嵌套在<main>中，包含一些间接信息（术语条目、作者简介、相关链接，等等）。

  7. 页脚：<footer>底部区域</footer>

image.png

无语义标签

用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。

  1. 内联的无语义元素：<span></span>

  2. 块级无语义元素：<div></div>

    相当于一个容器，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中。

    警告 ：由于<div>没有语义值，会使HTML代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。

效果标签

  1. 换行标签

    在html中是忽略回车和空格的，想输入回车换行，就必须输入<br>

    <br>标签是一个空标签。没有html内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br>、<hr>和<img>。

  2. 输入空格，必须写入&nbsp;

  3. 水平分割线标签<hr>

    <hr>标签的在浏览器中的默认样式线条比较粗，颜色为灰色。可以通过CSS修改线条样式。

  4. 斜体<em></em>

  5. 粗体<strong></strong>

列表标签

  1. 无序列表标签 <ul> <li></li> </ul>

    默认样式为：每项li前都自带一个圆点

  2. 无序列表标签 <ol> <li></li> </ol>

    默认样式为：每项li前都自带序号，序号默认从1开始

  3. 去除默认样式

    ul {
    list-style: none;
}

ol {
    list-style: none;
}

  4. 描述列表

    <dl>
    <dt>...</dt>
        <dd>...</dd>
    <dt>...</dt>
        <dd>...</dd>
    <dt>...</dt>
        <dd>...</dd>
</dl>

    浏览器的默认样式会在描述列表的描述部分（dd）和描述术语（dt）之间产生缩进。

表格标签

<table>
    <caption>表格的标题</caption>
    <tr>
        <td></td>
        <td></td>
        ...
    </tr>
    <tr>
        <td></td>
        <td></td>
        ...
    </tr>
    ...
</table>

  1. <table></table>双标签：整个表格以<table>标记开始、</table>标记结束。可以放caption标签和tr标签。

  2. <tr></tr>双标签：表格的一行，所以有几对tr，表格就有几行。tr里面只能放th或者td标签。

  3. <td></td>双标签：表格的一个单元格，一对<tr></tr>中包含几对<td></td>，说明一行中就有几列。

  4. <th scope="xxx"></th>双标签：表格表头，用来设置表格的标题，scope指明是列标题（col）还是行标题（row），文本默认为粗体并且居中显示。

  5. <table border="值">：border属性可以为表格添加边框，属性值为数字。在没有添加border属性之前, 在浏览器中显示是没有表格线的。

  6. 创建表格的三个区域：thead、tbody、tfoot。用<thead>双标签包裹表头；用<tbody>双标签包裹主体；用<tfoot>双标签包裹表尾。

链接及图片等媒体标签

  1. 超链接标签<a></a>

    <a href="目标网址" 
title="鼠标滑过显示的文本" 
target="xxx" 
download="链接到要下载的资源时默认的保存文件名">
链接显示的文本</a>

    href="#"：调转到页面顶部位置

    href='#元素的id值'：跳转到目标元素的位置

    链接显示的文本的默认颜色为蓝色（被点击过的文本颜色为紫色）。可以通过CSS修改样式。

    target属性：代表打开网页的方式。可选值为"_self"和"_blank"。默认值为_self，代表在当前页面打开链接；_blank代表在新窗口打开链接。

  2. 图片标签

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

  • 图像可以是GIF，PNG，JPEG格式的图像文件

  • 响应式图片（使用属性srcset和sizes来提供更多额外的资源图像和提示）

    srcset：定义了浏览器可选择的图片设置以及每个图片的大小，每张图片信息的设置和前一个用逗号隔开

    srcset="图片1的文件名 图片的固有宽度(像素), 图片2的文件名 图片的固有宽度(像素),..."

    sizes：定义了一组媒体条件（例如屏幕宽度）并指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。

    sizes="媒体条件(例如max-width:600px) 当媒体条件为真时,图像将填充的槽的宽度"

  1. 视频标签<video>
<video src="视频地址" controls>后备内容</video>

  • controls：如果出现该属性，则向用户显示控件，比如播放按钮。

  • autoplay：如果出现该属性，则视频在就绪后马上播放。

  • loop：如果出现该属性，则音频或者视频文件循环播放。

  • muted：如果出现该属性，则媒体播放时默认关闭声音。

  • poster：这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

  • preload：这个属性被用来缓冲较大的文件，有 3 个值可选：

    "none" ：不缓冲

    "auto" ：页面加载后缓存媒体文件

    "metadata" ：仅缓冲文件的元数据

  • 后备内容：当浏览器不支持标签的时候，就会显示这段内容，这使得我们能够对旧的浏览器提供回退内容。

  • 使用多个播放源以提高兼容性

    <video controls>
    <source src="视频URL1.mp4" type="video/mp4">
    <source src="视频URL2.webm" type="video/webm">
</video>

    浏览器将会检查<source>标签，并且播放第一个与其自身codec相匹配的媒体。你的视频应当包括WebM和MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。

  1. 音频标签<audio> 与类似，但标签不支持width/height属性和poster属性（没有视觉部件）

  2. <Iframe>标签

    <iframe src="文件路径"></iframe>

    iframe标签是一个内联框架，就是用来在当前HTML页面中嵌入另一个文档的。

    height/width：框架显示的高度/宽度

    name：定义框架的名称

    frameborder：定义是否需要显示边框，取值为1表示需要边框

    scrolling：设置框架是否需要滚动条，取值可以是yes,no,auto

    src：设置框架的地址，可以使页面地址，也可以是图片地址

    align：设置元素对齐方式，取值可以是left，right，top，middle，bottom

    不支持poster属性（没有视觉部件）

    存在安全和版权问题

表单标签

  1. <form>标签

    <form method="传送方式" action="服务器文件">

    <form>：<form>标签是成对出现的，以<form>开始，以</form>结束。

    action：浏览者输入的数据被传送到的地方。

    method：数据传送的方式（get/post）。

    所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间，否则用户输入的信息可提交不到服务器上。

  2. 输入框标签<input>

    <form>  
    <input type="text/password" name="名称" value="文本">  
</form>

    type：当 type="text" 时，输入框为文本输入框；当 type="password" 时, 输入框为密码输入框。

    name：为文本框命名，以备后台程序ASP 、PHP使用。

    value：为文本输入框设置默认值。(一般起到提示作用)

    placeholder属性：为输入框占位符，里面可以放提示的输入信息。当输入框输入内容时，占位符内容消失，输入框无内容时，占位符内容显示。

    <input type="text/password" name="名称" placeholder="文本">

  3. 数字输入框

    <input type="number">

    数字框只能输入数字，输入其他字符无效。

    数字框最右侧会有一个加减符号，可以调整输入数字的大小，不同浏览器表现不一致。

  4. 网址输入框

    <input type="url">

    输入框的值需以 http:// 或者 https:// 开头，且后面必须有内容，否则表单提交的时候会报错误提示。

  5. 邮箱输入框

    <input type="email">

    输入框的值必须包含@，且@之后必须有内容，否则会报错误提示。

  6. 文本输入域标签

    <textarea  rows="行数" cols="列数">文本（可以输入默认值）</textarea>

  7. label

    <label for="控件id名称">文本</label>

    在label标签内点击文本，就会触发此id名的控件。

  8. 单选框、复选框

    <input type="radio/checkbox" value="值" name="名称" checked="checked"/>

    当type="radio"时，控件为单选框（只能选择一项）；当type="checkbox"时，控件为复选框（可选择多项）

    value：提交数据到服务器的值（后台程序PHP使用）

    name：为控件命名，以备后台程序ASP、PHP使用。同一组的单选按钮，name 取值一定要一致。

    checked：当设置checked="checked"时，该选项被默认选中

  9. 下拉菜单标签 select、option

    <select>  
    <option value='提交值'>选项（显示值）</option>  
</select>

    select标签里面只能放option标签，表示下拉列表的选项。

    option标签放选项内容，不放置其他标签。

    在option中设置selected="selected"属性，则该选项就被默认选中。

  10. 提交按钮

    <input type="submit" value="提交">

    type：只有当type="submit"时，按钮才有提交作用

    value：按钮上显示的文字

  11. 重置按钮

    <input type="reset" value="重置">

    type：只有当type="reset"时，按钮才有重置作用

    value：按钮上显示的文字

avatar
文章
阅读
粉丝