HTML入门视频笔记

前言

这只是后续粗略复习用的，且从img标签开始记录，因为前面很基础，且从img才打算记笔记（基础为上课所记）。

基础

<b 加粗
<i 斜体
  空格

img标签

<img src="F:/BaiduNetdiskDownload/%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%E5%A4%B9/docs/%E5%9B%BE%E5%83%8FURL" alt="not404" />
// 图像没显示出来，则用alt的文字来显示

alt 文本替换文本。图像不能显示的文字

title 文本提示文本。鼠标放到图像上，显示的文字

width、height、border 设置大小，边框粗细。

路径之相对路径：

同一级路径 img src=”img.jpg”

下一级路径 img src=”images/img.jpg”

上一级路径 img src=”../img.jpg”。（html文件下有xx.html要用图像，而图像在images文件，和html文件同一级。上两级为../../img.jpg）

路径之绝对路径：

放在电脑某个位置或者网址

超链接标签 a

1、外部链接：<a href="" target="目标窗口的弹出方式">文本或图像</a>

_blank好点，为在新窗口打开链接；
_self默认

2、内部链接：两个html：公司简介.html，简介页面.html。

即在gsjj.html打上<a href="简介页面.html">公司简介</a>

跳转到另一个页面的锚点:
本页面
<a href="fitst.html#foot">跳转到另一页面的锚点</a>
first页面，锚点设置，使用a标签，属性name设置
<a name="foot">hello world</a>

3、空链接：<a href="#">公司简介</a>

4、下载链接：地址链接的是zip等压缩包形式或者是文件.exe

<a href="img.zip">下载文件</a>

5、网页元素链接：文本、图像、音频、表格、视频等都可以放在href里。

6、锚点链接：点击链接后，可以快速定位到页面中的某个位置。

在href属性中，设置属性值为#名字的形式，如<a href="#live">个人生活</a>
<h3 id="live">个人生活</h3> 给个名字为live的id，这样就可以跳转到h3 个人生活上。

注释标签和特殊字符

command + /

空格：  (一个代表一个空格)

<：等等

VSCode使用Live Server的Go live 注意点：

若要改变要预览文件的html，先F1，点击Live Server:Change Live Server Workspace，选择要预览的文件

这样才不会出现只会go live 某个固定的文件页面。

表格标签

表格不是用来布局页面的，而是展示数据的

1、<table> <tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr> <tr><td>刘德华</td> <td>男</td> <td>56</td></tr> <tr><td>张学友</td> <td>男</td> <td>56</td></tr> <tr><td>黎明</td> <td>男</td> <td>56</td></tr> <tr><td>郭富城</td> <td>男</td> <td>56</td></tr> </table>

姓名	性别	年龄
刘德华	男	56
张学友	男	56
黎明	男	56
郭富城	男	56

tr表示行，td表示具体个体。th替换td，则文字会加粗和居中。
rowspan=”3” 垂直合并3个单元格，水平方向为colspan，td 属性。
注意：想要把表头th与下面td合并，则要去除<thead和<tbody,不然有这个分界无法合并。

表格结构标签

thead表示表头区域（姓名、性别、年龄一行）一定有tr，tbody表示表哥主体。即分成头和身体。

<table> <thead> <tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr> </thead> <tbody> <tr><td>刘德华</td> <td>男</td> <td>56</td></tr> <tr><td>张学友</td> <td>男</td> <td>56</td></tr> <tr><td>黎明</td> <td>男</td> <td>56</td></tr> <tr><td>郭富城</td> <td>男</td> <td>56</td></tr> </tbody> </table>

列表标签

1、无序列表（重点）

<ul>

<li>榴莲</li>

<li>臭豆腐</li>

<li>螺狮粉</li>

</ul>

榴莲
臭豆腐
螺狮粉

<ul> type属性有disc，square，circle，默认disc。 square为实心方格，circle为空心圆，disc实心圆。

注意：<ul>中只能放<li>，不能放<p>什么的，但<li>可以随便放标签<p>等。
列表嵌套（在<li中嵌套列表）

    <li>吃饭
        <ul>
            <li>包子</li>
            <li>豆浆</li>
        </ul>
    </li>
    <li>上课</li>
    <li>继续吃饭</li>
</ol>

吃饭
- 包子
- 豆浆
上课
继续吃饭

2、有序列表

<ol>

<li>榴莲</li>

<li>臭豆腐</li>

<li>螺狮粉</li>

</ol>

榴莲
臭豆腐
螺狮粉

<ol> type属性有1，a，A，i，I，默认为1，即按照阿拉伯数字排列，使用a即为 a.xxx b.xxx c.xxx
注意：<ol>也是只能放<li>，有序列表一般用CSS做。

3、自定义列表（重点）

如图，外面是dl，关注我们是dt，新浪微博、官方微信、联系我们是dd

<dl>

<dt>关注我们</dt>

<dd>新浪微博</dd>

<dd>官方微信</dd>

<dd>联系我们</dd>

</dl>

注意：<dl>也是只有放<dt>

表单标签

1、表单域（必备）

<form> 把它范围内的表单元素信息提交给服务器。

<form action="demo.php" method="POST" name="name1">

内容

</form>

form标签：

method：GET（默认），POST。
    get请求时，会将对应的含有name属性的字段将其中的value值按照’参名=value’,多个参数值（用户名和密码）提交时之间用&相连接。
action：提交的路径，默认提交到本页面
    

绝对 URL - 指向另一个网站（比如 action=”http://www.example.com/example.htm"）
相对 URL - 指向网站内的一个文件（比如 action=”example.htm”）
action=”demo-form.php”，即表单数据将被发送到服务器上的“demo-form.php”。

2、input输入表单元素

<form >

用户名：<input type="text"> <br>

密码：<input type="hidden"> <br>

</form>

type属性:

radio:变为单选框，如上方图片性别选择（同一组name一样，并分别给不同value）；
type=”radio” name=”相同值” value=”不同值”

checkbox：多选，如上方喜欢的类型，一个类型对于一个input，都要设置type，name，value。

date：上方生日框，显示格式为yyyy/mm/dd;

file:上传文件；

submit：提交；

reset：重置键，form表单域回到初始状态

例子：<input type="submit" value="免费注册"> 注册按钮，把form内的元素提交给服务器。

所以要实现各种按钮，给type不同的属性，文字就写在value。

3、label标签

label绑定一个表单元素，这样当点击label内的文本时，就会做出反应。

<label for="password"> 密码：</label><input type="text" id="password"> 密码两字加了label标签后，点击汉字也能跳到输入框input（这里label的for为input的id）

label也有属性，如for等。

4、select下拉表单元素

5、textarea文本域元素

输入内容较多时，不能用文本框表单了，用这个来实现多行文本输入。

<form>

网站介绍：

<textarea >

</textarea>

</form>

制作注册页面就可以使用上面这些元素，记得用在table，这样每行就会对齐（见1、表单域下面的图）

6、datelist(新增表单元素)

具有下拉选择和输入两种功能，

<datelist>
    <option>xxx</option>
    <option>yyy</option>
</datelist>

查阅文档

后言

大概了解HTML后感叹到，博客主题的html文件终于会看懂一些了！之前想把主题的底部加一些字，愣是不会。

后面CSS可能就会改元素属性啦。