[前端与 HTML | 青训营笔记]

无限月读A
89 阅读3分钟

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

一.本堂课重点内容

  1. 前端工作的定义
    前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。
  • 解决GUI人机交互问题
  • 跨终端 （1.pc/移动浏览器 2.客户端/小程序 3.VR/AR等）
  • Web技术栈
  1. 前端技术栈拆解与分析
  • HTML（内容）
  • CSS（样式）
  • JavaScript（行为）
  1. HTML 作用解析

html是超文本标记语言,是用来描述web文档的一种标记语言,使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。

  1. HTML 语义化

image.png

二.详细知识点介绍

HTML的常用标签

1.标题标签（从h1~h6大小不同）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>

image.png

2.列表标签

有序列表

<ol>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ol>

无序列表

   <ul>
            <li>阿凡达</li>
            <li>泰坦尼克号</li>
            <li>复仇者</li>
     </ul>

自定义列表（dt是标题 dd是内容）

      <dl>
        <dt>标题1</dt>
        <dd>aaa</dd>
        <dt>标题2</dt>
        <dd>bbb</dd>
    </dl>

3.链接

  <a href="https://www.baidu.com">百度</a> <!--默认在当前窗口打开链接-->
  <a href="https://www.baidu.com" target="_blank">百度</a> <!--在新窗口打开链接-->

注： herf属性的属性值是当前要打开的链接，target属性表示打开方式，不写target则默认为target="_self",即在当前页面打开，还有_blank,_self,_parent等。

4.多媒体标签

<img src="./123.png" alt="截图" title="图片" width="400">
   
<audio src="./aaa.mp3" controls></audio>
    
<video src="./video.mp4" controls></video>

注：他们都是单标签，src属性放多媒体文件的网址，img标签的alt属性表示图片因为某种原因未加载时显示的文字信息，title属性是当鼠标滑动到图片上时显示图片标题；controls属性：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。

5.输入标签

（1）input标签

image.png

（2）多选框

  <p>
       <input type="checkbox">
       <input type="checkbox" checked="checked">
  </p>

checked表示默认选中 image.png

(3)单选框

 <p>
    <input type="radio" name="sport">
    <input type="radio" name="sport">
  </p>

image.png

注：是name在控制，给name相同属性值，只能选一个，不能去掉，去掉后会变成多选。

(4)下拉框

   <p>
            <select name="" id="">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
            </select>
        </p>

image.png

6.文本标签
上面的标题标签也属于文本标签
p标签：段落标签
hr标签：水平线标签
br标签：换行标签
还有引用 标签q和blockquote

image.png

7.表格标签

table标签，thead放表头内容，tbody里放表格内容；tr标签表示行，th和td表示列，th是表头thead里的列，td是tbody里的列

<table border="1" align="center" cellpadding="20" cellspacing="0">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>职业</th>
        <th>地址</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>宇智波佐助</td>
        <td>男</td>
        <td>学生</td>
        <td>暗影岛</td>
    </tr>
    </tbody>
</table>

image.png

其中border是控制表格边框，0为没有，1为有；align属性控制表格位置； cellpadding="20"表示表格内的文字距离边框20像素 ；cellspacing="0"表示表格框与表格框间距离为0，使得两个表格框中间中有一条边框线。这些属性后面用css都可以实现，一般用css操作。

表格的单元格可以合并，colspan合并列，rowspan合并行。

<table border="1" align="center" cellpadding="20" cellspacing="0">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>职业</th>
        <th>地址</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2">宇智波佐助</td>
        <td>男</td>
        <td>学生</td>
        <td>暗影岛</td>
    </tr>
    <tr>
        <td>wa</td>
        <td colspan="2">wa</td>
    </tr>
    </tbody>
</table>

image.png

8.其他标签
div和span：div和span都是容器，没有什么意义，div常用来布局，div是块标签，span是行内标签。

image.png

三.课后个人总结

上面是一些基本的常用的html的标签，他们有很多属性，一些常用的还是要掌握，本篇也是web开发的开篇之作，本身内容体系挺庞大的，在这里我写一些重要的基础的做总结，更多的内容还要我们努力去学

avatar
文章
阅读
粉丝