小桥流水78

这个屌丝很懒，什么也没留下！

热门标签

自我学习Day1:HTML入门

作者：小桥流水78 | 2024-07-13 05:25:18

踩

自我学习Day1:HTML入门

前言:由于之前就自学过配置环境，就不在记录了


 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hellow world!</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

<!DOCTYPE html>：表示是h5文档

中文网页需要设置<meta charset="utf-8">，有的浏览器（如360）设置gbk为默认，设置为<meta charset="gbk">

一、常用标签

1、标题<h1></h1>

效果：变粗变大

<h1> 我是一级标题 </h1>

备注：等级分<h1>——<h6>六个等级，越往下越小

2、段落<p></p>

效果：段落会自动换行，段落直接留有空格

<p> 我是一个段落标签 </p>

3、换行<br />

效果：简单的开始新的一行，并不会如段落插入间距

<br />

备注：<br>也可以，但是建议写成<br \>

4、链接<a></a>

效果：增加一个html链接

<a href="https://www.baidu.com">这是一个链接</a>

备注：1、支持外部或内部链接

2、无确定目标可用< a href="#">

3、如果地址是文件/压缩包，则会下载文件

4、id属性：先插入一个id

<a id="tips">需要引导到的位置</a>

在建立一个链接到id（id="tips"）

<a href="#tips">访问的链接</a>

也可以是跨网页链接

<a href="https://www.baidu.com/index.html#tips">

5、元素<div>，<span>

效果：只是装饰内容布局的，

块级元素<div>是大盒子一行只能有一个，如果与CSS使用可以对应样式属性，同时是页面布局常用。

内联元素<span>小盒子可以多个


     <div> 这是大盒子 </div>    
     <span> 这是小盒子 </span><span> 这是小盒子 </span><span> 这是小盒子 </span>

6、图片<img>

效果：定义图片

<img src="图像URL" />

备注：src是<img>必须属性，指定图片的路径和文件名

其他属性如下，格式为 key='value'格式

属性	属性值	说明
src	图片路径	必须属性
alt	文本	可替换文本，图片不能显示的文字
title	文本	提示文本，鼠标放图片上显示的文字
width	像素	宽
height	像素	高
border	像素	边框粗细

二、基础内容

1、路径

1.1绝对路径

通常指的是从盘符开始的路径，例“E:\server\test\logo.png”，"~\server\test\logo.png"

或者是完整的网络地址itcast.cn/images/logo.gif

1.2相对路径

分类	符号	说明
同级目录		同级，如<img src="logo.png"/>
下级目录	/	下级，如<img src="test1/logo.png"/>
上级目录	../	上级，如<img src

2、特殊字符

三个常用的大于小于空格，其他的直接百度

字符	描述	字符代码
	空格符	&nbsp
<	小于号	&lt
>	大于号	&gt

3、文本格式化

例：加粗文字

<b>加粗文本</b>

3.1文本格式化

标签	描述
<b>	加粗
<em>	着重
<i>	斜体
<small>	小号字
<strong>	加重语气
<sub>	下标字
<sup>	上标字
<ins>	插入字
<del>	删除字

3.2计算机输出

标签	描述
<code>	计算机代码
<kbd>	键盘码
<samp>	计算机代码样本
<small>	小号字
<strong>	加重语气

3.3引用，引文和标签定义

标签	描述
<abbr>	缩写
<address>	地址
<bdo>	文字方向
<blockquote>	长引用
<q>	短引用
<cite>	引用、引证
<dfn>	定义项目

4、头部<head>

<head>元素可以插入脚本(scripts)，样式文件(CSS)，meta信息，包括<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

(<header>标签仅仅用于定义文档页眉介绍，不一样）

4.1<title>

定义浏览器工具栏的标题、收藏夹中的标题、搜索引擎中的标题

4.2<meta>

<head>标签第一行主要作用：

1、文档编码chrset

<meta chrset="utf-8">

2、搜索关键字description

<meta name="keywords" content="baidu,百度"

3、网页作者author

<meta name="author" content="爱丽数码">

4、网页描述description

<meta name="description" content="umamusume赛马娘，爱丽数码">

4.3<script>

加载脚本

4.4其他

<base>：页面链接默认链接地址

<link rel="shortcut icon" href="图片url">

5、表格<table>

1、定义

<tr>为行，<td>为列内单元格，<table border=“1”>为边框大小为1，无边框改为<table>


<h4>两行三列:</h4>
<table border="1">
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
</table>

浏览器样式如下

2、表头<th>

可以把上方第一行内的<td></td>改为<th></th>


<h4>两行三列:</h4>
<table border="1">
  <tr>
    <th>1-1</th>
    <th>1-2</th>
    <th>1-3</th>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
</table>

3、合并单元格

跨列<td colspan=“2”>跨行<td rowspan=“2”>，同时有则用空格隔开，归属以左上角优先

例：一个向右跨两列的单元格<td colspan=“2”>


    <tr>
	    <th colspan="2">时间\日期</th>
	    <th>一</th>
	    <th>二</th>
	    <th>三</th>
	    <th>四</th>
	    <th>五</th>
    </tr>

4、常用属性

4.1<table>


border="1"   表格边框的宽度
bordercolor="#fff"   表格边框的颜色
cellspacing="5"   单元格之间的间距
width="500"   表格的总宽度
height="100"   表格的总高度
align="right"   表格整体对齐方式    (参数有  left、center、right)
bgcolor="#fff"   表格整体的背景色

4.2<tr>


bgcolor="#fff"    行的颜色
align="right"    行内文字的水平对齐方式    (参数有left、center、right)
valign="top"     行内文字的垂直对齐方式    (参数有top、middle、bottom)

4.3<td><th>


width="500"    单元格的宽度，设置后对当前一列的单元格都有影响
height="100"   单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff"  单元格的背景色
align="right"  单元格文字的水平对齐方式    (参数left、center、right)
rowspan="3"    合并垂直水平方向的单元格
colspan="3"    合并水平方向单元格
valign="top"   单元格文字的垂直对齐方式    (参数middle、bottom、top)

5、列表<ul><ol><dl>

5.1无序列表<ul>，用粗体圆点标记

例：


<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

5.2有序列表<ol>，用数字标记

例：


<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

5.3自定义列表<dl>，每个自定义列表以<dt>开始，列表的定义项以<dd>开始


<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

三、CSS

1、定义：渲染

2、引用

2.1、内联：使用元素"style"属性

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

2.2、内部样式表：<head>的<style>元素来包含CSS


    <head>
        <title>百度</title>
        <style>
            body {
                background-color: linen;
            }
            h1 {
                color: maroon;
                margin-left: 40px;
            }
        </style>
    </head>

2.3、外部：使用CSS文件（推荐）

引用外部文件.css格式，例如style.css


    body {
        background-color: linen;
    }
    h1 {
        color: maroon;
        margin-left: 40px;
    }

然后再html里引入style.css文件


    <!DOCTYPE html>
    <html>
        <head>
            <title>百度</title>
            <link rel="stylesheet" href="./style.css">
        </head>  
        <body>
            <h1>百度</h1>
            <p>http://www.baidu.com/</p>
        </body>
    </html>

或者是url路径


    <!DOCTYPE html>
    <html>
        <head>
            <title>百度</title>
            <style>
            @import url("./style.css")
            </style>
        </head>  
        <body>
            <h1>百度</h1>
            <p>http://www.baidu.com/</p>
        </body>
    </html>

备注：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。相比而言，前一种用的最多，稳定，加载快，兼容性强

3、样式实例和标签

标签	描述
background-color	背景颜色
font-family	字体
color	颜色
font-size	字体大小
text-align	文字对齐

<p style="background-color:green;font-family:arial;color:red;font-size:20px;text-align:center;">一个段落。</p>

参考：

1、HTML 教程 | 菜鸟教程

2、HTML标签大全 - 知乎

3、HTML中head标签是什么意思？一篇文章教你正确地使用head标签-html教程-PHP中文网

4、HTML引用CSS（4种方法）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/817791