小白Html的学习笔记

Renzo_Wu

已于 2022-07-12 08:33:20 修改

阅读量351

点赞数 2

文章标签：学习 html

于 2022-07-12 08:31:57 首次发布

本文链接：https://blog.csdn.net/qq_19255347/article/details/125695057

版权

前言：本人所使用的编辑器是VScode进行HTML的学习

一、关于VScode配置操作

1、配置中文，插件扩张搜索Configure Language

2、配置open in bowser

3、设置默认浏览器

在齿轮中点击设置，搜索default browser，找到Open-in-browser

4、设置默认语言

在齿轮中点击设置，搜索default language，找到default language

5、关闭代码提示

6、快捷键

快捷键新建文档：ctrl+n

注释代码：ctrl+/

快速运行html在浏览器中：atl+b

快速复制代码：alt+shift+方向键

回撤：ctrl+z

快速删除一行代码：ctrl+x

格式化的快捷键：alt+shift+f

二、关于html的基础操作

新建一个文档

可以得到一个html的默认格式

我们所要操作的是在<head></head>和<body><body>加入各种标签元素

三、head里面的标签元素

head里面可添加<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

title标签

1、网页标题

2、收藏夹里的标题

3、显示在搜索引擎结果页面的标题

style标签

定义各种属性和CSS内部样式表

meta标签

1、为搜索提供关键词

<meta name="keywords"  content="牛奶、果汁、可乐"></meta>

2、为网页定义描述内容

<meta name="description" content="低价&饮料、贩卖"></meta>

3、定义网页作者

<meta name="author" content="Renzo"></meta>

4、定义多少秒刷新当前网页

每30秒刷新当前网页

<meta http-equiv="refresh" content="30"></meta>

5、定义多少秒后跳转页面

定义3秒跳转到百度

<meta http-equiv="Refresh" Content="3";url=https://www.baidu.com"></meta>

link标签

定义文档与外部之间的关系和CSS外部样式表

script标签

引用脚本文件

noscript标签

跟script标签一样都是与JavaScript有关的

base标签

定义链接地址（url）

<base href="http//www.baidu.com" target="_blank"></base>

四、body中的标签元素

a链接

将定义的链接定义在显示处，其中

href加的是文档路径网页地址（网页地址要带上http//）

target属性的 _blank 表示在新的页面中打开 _self 表示在本页面中打开

<a href="http//www.baidu.com" target=_blank>点击跳转页面</a>

img标签

引用图片的作用，用来设置图片样式的链接

border为边界的粗细

src为图片的路径（可以是相对路径也可以是绝对路径）

alt属性用来为图像定义一串预备的可替换的文本

width图片的宽度

height图片的高度

width和height不是缩小或放大原来的图片

<img border="0" src="smiley.gif" alt="链接" width="32" height="32">

列表的标签元素

无序列表（默认有小黑圆圈，可以在<ul>中加入style="list-style-type: "，空白处可以填disc circle square定义小黑圆圈的形状，也可以none不要小黑圆圈）

格式：

<ul>
    <li>内容</li>
    <li>内容</li>
</ul>

有序列表（同样在有序列表中有数字，可在<ol>中加入type=" "，改变的数字的类型，例如罗马数字）

格式：

<ol>
    <li>内容<li>
    <li>内容<li>
</ol>

自定义列表

格式：

<dl>
    <dt>内容</dt>
    <dd>内容</dd>
</dl>

注：列表可以进行嵌套

五、HTML区块（区块元素与行内元素）

html可以通过<div>元素和<span>元素将各种元素组成

块级元素

块级元素在浏览器显示时，通常会以新行来开始，例如<h2>、<p>、<ul>、<table>等。

行内元素

行内元素在浏览器显示时则不会换行，例如<a>、<img>、<b>、<td>等

div元素

<div>元素是块级元素，用于组合其他HTML元素的容器

span元素

<span>元素是内联元素，可用作文本的容器

六、HTML 内联框架

其实浏览器的同一个窗口中不是只能显示一个页面，可以使用框架的方法实现

iframe元素

内联框架实现在页面中嵌套页面

格式：

<a href="http://news.baidu.com/" target="iframe_a">在窗口中访问页面</a>
<iframe name="iframe_a" src="https://image.baidu.com/" 
frameborder="10" scrolling="no" width="500px" height="500px"></iframe>

src是要嵌套的网页地址，frameborder框架边框大小，scrolling设置是否滚动（因为嵌套网页的大小，框架只能显示部分）width框架宽度，height框架高度

七、HTML的框架集

框架集是实现多个页面的嵌套，注意：不能在<body></body>中使用

可以用col列 row行 noresize锁定边界进行页面框架进行调整

src是引用html文件或者图片的路径

<frameset rows="20%,*" noresize="noresize">
    <!-- 上半部分 -->
    <frame src="./top.html"></frame>
    <!-- 下半部分 -->
    <frameset cols="35%,*" noresize="noresize">
        <!-- 左半部分 -->
        <frame src="./left.html"></frame>
        <!-- 右半部分 -->
        <frame src="./css.jpg" name="right_content"></frame>
    </frameset>
</frameset>

八、HTML的表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

格式

<table>
       <thead>
                <td>内容</td>
                <td>内容</td>
        </thead>
       <tr>
                <td>内容</td>
                <td>内容</td>
        </tr>
       <tr>
                <td>内容</td>
                <td>内容</td>
        </tr>
        <tfoot>
                <td>内容</td>
                <td>内容</td>
        </tfoot>
</table>

表格和边框边界属性

定义边界的粗细

<table border = "1">

表格的表头和页脚

表格的表头使用<th>标签进行定义。

<thead>设置表格的页眉: [固定在表格的最上方]

<tfoot>设置表格的页脚: [固定在表格的最下方]

表格属性

设置表格的属性 (应用在 table 之上):border: 表格的 "外边框"。cellpadding: 单元格内容与单元格的四周边的间距。cellspacing: 单元格与单元格的间距

单元格属性

设置单元格的属性 (应用在 th, tr, td 之上):

单元格的大小设置

width宽度，height高度

对齐的样式

align(水平对齐)

valign(垂直对齐)

背景色的设置

bgcolor

表格单元格跨行跨列（也就是合并操作）colspan行合并,rowspan列合并

<th colspan="2"></th> 
<th rowspan="2"></th>
<td colspan="2"></td> 
<td rowspan="2"></td>

九、HTML表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)、输入框（input）等等。

表单使用表单标签<form></form>中加入单表元素

表单输入元素

type输入类型 name是在提交请求时的key 而value是输入框中的数值 placeholder提示信息 required要求提供该数据

<input type="text" name="username" placeholder="请输入姓名"  required>

单选框

type选择radio name要一致才能进行约束 value为表单提交时的值 checked默认选择

男：<input type="radio" name="sex" value="男" checked> 
女：<input type="radio" name="sex" value="女">

多选框

type选择checkbox disabled禁止选择

饲料：<br>
鱼肉：<input type="checkbox" name="pet_food" value="鱼肉"  ><br>
五谷：<input type="checkbox" name="pet_food" value="五谷" checked><br>
鸡肉+牛肉：<input type="checkbox" name="pet_food" value="鸡肉+牛肉" ><br>
海鲜+蛋白质：<input type="checkbox" name="pet_food" value="海鲜+蛋白质" ><br>

下拉列表

格式：

使用<select>

</select>

<select name="fav_food">
            <option value="鱼肉">鱼肉</option>
            <option value="五谷" selected>五谷</option>
            <option value="鸡肉+牛肉">鸡肉+牛肉</option>
            <option value="海鲜+蛋白质" >海鲜+蛋白质</option>
</select>

提交数据按钮

上传数据的的按钮

<button type="submit">提交</button>

action和method

action表单提交的请求路径 method为请求的提交方式，默认为get提交

HTML 多媒体控件

mp3播放器

在页面中嵌套一个mp3播放器可以使用以下

<embed width="100" height="50" 
		src="d02.mp3" />	
<audio controls>
	   <source src="d01.mp3" type="audio/mpeg">
	   <source src="d02.mp3" type="audio/mpeg">
</audio>

视频播放器

在页面中嵌套一个视频播放器可以使用以下

<video width="350" height="350" controls autoplay loop>
	<source src="video1.mp4" type="video/mp4"/>
	<source src="video2.mp4" type="video/mp4"/>
</video>

后续：学习到这里我们可以实现一些很简单的页面，但是会发现还是有很多东西跟我们所看到的网页有所不同，原因是要用到CSS样式表这样一个操作，更有加载上JavaScript的方式，后续的话，敬请关注。

Renzo_Wu

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
小白Html的学习笔记

1、配置中文，插件扩张搜索Configure Language 2、配置open in bowser 3、设置默认浏览器在齿轮中点击设置，搜索default browser，找到Open-in-browser 4、设置默认语言在齿轮中点击设置，搜索default language，找到default language5、关闭代码提示6、快捷键快捷键新建文档：ctrl+n注释代码：ctrl+/快速运行html在浏览器中：atl+b快速复制代码：alt+shift+方向键回撤：ctrl+z快速删除一行代码：ct
复制链接

扫一扫