HTML入门

最新推荐文章于 2021-06-10 00:21:48 发布

INVinci_BY

最新推荐文章于 2021-06-10 00:21:48 发布

阅读量1.3k

点赞数 3

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/VinciB/article/details/113748343

版权

HTML 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

关于使用html编译器
一般可以使用PyCharm 或 VS Codew

文章会从以下图片的内容开展

在这里插入图片描述

1. 结构框架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

整体框架如上：

< !DOCTYPE html > ——文档声明
< h e a d >··· ··· < /head >——页头
< body >··· ···< /body > ——页身即在其中的内容是网页具体页面的内容，重点编辑页面
整个网页从< html >开始，从 < /head >结束

在head中存在内部标签，如：

< title > 定义网页的标题
< meta > 定义网页的基本信息

此处 < meta charset="UTF-8" >是为了防止乱码

< style > 定义CSS样式
< link > 链接外部CSS文件或脚本文件
< script > 定义脚本语言
< base > 定义页面所有链接的基础定位（用得很少）

~~这些大概了解就好~~

2.基本操作：

1. 特殊符

在编辑时一般可用&emsp ;来代表空格，其它的可在使用时查找具体表达，重复&emsp；即重复空格，这里不会使用重叠，如下表示：
在这里插入图片描述

2. 标签可分为一般标签和自闭合标签

一般标签：< head > < /head > 有两头
自闭和标签： < /hr > 只有一头，一般单独一行表示

3. 表现形式分为块元素和行内元素

块元素：一般独占一行，里面可以嵌入行内元素。
常见的有< h1 >~< h6 >表示标题字号大小、p表示段落、hr表示水平线、div用来分割块元素······
行内元素：可以容纳自己类型的元素，但是不能容纳块元素。
常见的有strong加粗字体、sup上标、em斜体······

通过案例来了解使用

<p>表示一个段落</p>
<p>表示另一个段落</p>
<h1>表示一个标题</h1>
</br><!--表示换行-->
<a href="https://www.baidu.com">表示一个链接</a>
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
 <!--ps:这里图像的名称和尺寸是以属性的形式提供的。-->

最终显示为
在这里插入图片描述
一般注释这样写 < !–内容-- >

3.内容：

1. 基本内容

<body>
    <h1>标题大小1</h1>
    <h2>标题大小2</h2>
    <b>粗</b>
    <i>斜体</i>
    <cite>斜体</cite>
    <p>文字<sub>下角标</sub><ins>下划线</ins>文字<sup>上角标</sup><del>删除线</del></p>
    </hr><!--分割线-->
    <a href="https://www.baidu.com">链接</a>
</body>

最终显示：
Vinci

2.属性

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id id属性规定是HTML属性的唯一，且命名必须是字母开头 ~~关于id属性的了解见另一篇文~~
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

3.img图片插入

图像标签< img >定义
< img src=“pulpit.jpg” alt=“Pulpit rock” width=“304” height=“228”>
（1）Src源属性指的是图片的URL地址
src=“url”
URL指存储图像的位置：图片名为“图片.jpg"图片位于www.baidu.com的images目录中，那么url为http://www.baidu.com/images/图片.jpg。
（2）设置高度height和宽度width
width=“304” height="228"
指定图片高度和宽度
（3）Alt属性
alt=“Pulpit rock”
用来为图像定义一串预备的可替换的文本。如果浏览器无法加载图片，替换的文本可以告诉读者图片表达的信息，使用纯文本浏览器的人来说是非常有用的。
如果这里的图片在电脑里而非网站照片，我们可以尽量把图片放到与HTML文档同一个项目文件夹里，如案例图片为“下载.jpg”位于venv这个文件夹下
在这里插入图片描述
且html文件也为于此

那么可以用…/（这里是两个点，不知道为什么打出两个点后面显示三个点）返回上一文件夹的操作把图片放上去在这里插入图片描述
最后显示为

4.表格，列表，表单

1）.列表

<ol>有序列表
	<li>列表一</li>
	<li>列表二</li>
	<li>列表三</li>
</ol>

<ul>无序列表
	<li>列表一</li>
	<li>列表二</li>
	<li>列表三</li>
</ul>

<dl>定义列表
	<dt>自定义标题</dt>
	<dd>列表一</dd>
	<dd>列表二</dd>
	<dd>列表三</dd>
</dl>

最终显示为：
在这里插入图片描述

2）.表格

<table border="5">		
    <tr>	
        <td>横排1一</td>
        <td>横排1二</td>
        <td>横排1三</td>
    </tr>
    <tr>
        <td>横排2一</td>
        <td>横排2二</td>
    </tr>
    <tr>
        <td>横排3一</td>
    </tr>
</table>

border表示表格的外围宽度
每一个< tr >表示每一排表单
n个< tr >就有n行

最终显示如下：
在这里插入图片描述
其次，这个也可以用来布局

<table width="500" border="0">
<tr>
    <td colspan="2" style="background-color: aquamarine;">
        <h1>网页标题</h1>
    </td>
</tr>
<tr>
    <td style="background-color: aqua;width: 100px;">
    <b>菜单目录</b><br>
    目录一<br>
    目录二<br>
    </td>
</tr>
<tr>
    <td style="background-color: blueviolet;height: 200px;width: 400px">
    <!--background-color意思是背景颜色，这里打出来后编译器会自动给你颜色选择-->
    内容表示界面
    </td>
</tr>
<tr>
    <td colspan="2" style="background-color: blue;text-align: center">
    @qq.com
    </td>
</tr>
</table>

······这里扩展一下colspan的作用
在这里插入图片描述
······
上面最终显示为（颜色搭配有点丑····）

3）：表单

首先介绍在表单中如何输入元素
这里输入标签是< input >,而文本域可以通过< input type=“nr” >来设定。有以下几种情况
nr=text：输入字母，数字等内容，一般默认宽度为20个字符；
nr=password：在用户输入时字符不会明文显示，以星号或圆点替代；
nr=radio：这里最后显示的是前面带选择的形式，即单选题形式；
nr=checkbox：与前一个相似，但是这里相当于多选；
nr=submit：在最后多了一个提交的按钮，最后会把信息传给action后面的指定文件 name=“input” action=“pyvenv.cfg” method=“get” 这里需要放入在from里面

<form name="input" action="pyvenv.cfg" method="get">
        the first<input type="text" name="the first"></br>
        the scd<input type="password" name="the scd"></br>
        <input type="radio" name="the trd">trd1</br>
        <input type="radio" name="the trd">trd2</br>
        <input type="checkbox" name="fr">fr1</br>
        <input type="checkbox" name="fr">fr2</br>
        <input type="submit" value="Submit">
        </form>

最终表示：
在这里插入图片描述

5.布局< div >和< span >

< div >区块，< span >内联

<div id="container" style="width: 500px">
    <div id="header" style="background-color: #FFA500;">
        <h1 style="margin-bottom: 0;">网页标题</h1>
    </div>
    <div id="menu" style="background-color: #FFD700;height: 200px;width: 100px;float: left;">
         <b>菜单</b><br>
        目录一<br>
        目录二<br>
    </div>
    <div id="content" style="background-color: #EEEEEE;height: 200px;width: 400px;float: left;">
        内容</div>
    <div id="footer" style="background-color: #FFA500;clear: both;text-align: center;">
        @qq.com
    </div>
</div>

在每一个div板块里可以随意插入图片，表格或任意元素
上面最后显示如下：
在这里插入图片描述

6.框架iframe

<iframe src="https://www.baidu.com" width="300" height="300" frameborder="0"></iframe>
<iframe src="https://www.bilibili.com" width="300" height="300" name="att"></iframe>
<p><a href="https://blog.csdn.net/VinciB" target="att" rel="noopener">点击切换网页</a></p>

src和之前写的一样意思，引用网站或文件信息，最后两段起到转换网页作用，target指改变网页的目标，

rel=noopener 为了防止window.opener被滥用,在使用target时需加上
rel=norefferrer支持chrome49和opera36，不支持火狐，为了兼容需要加上

最后显示
在这里插入图片描述

7.脚本

涉及JavaScript，这里不做介绍。

INVinci_BY

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
5
评论
HTML入门

关于使用html软件一般可以使用PyCharm 或 VS Code1. 结构框架：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body></html>整体框架如上：< !DOCTYPE htm.
复制链接

扫一扫

专栏目录