实习日记--day8

最新推荐文章于 2022-06-27 18:13:39 发布

xpz的三级包

最新推荐文章于 2022-06-27 18:13:39 发布

阅读量409

点赞数

文章标签：实习前端 HTML

本文链接：https://blog.csdn.net/qq_40115021/article/details/94486730

版权

前端学习

HTML基础

HTML基础

（这两天的基本都转自菜鸟教程）

事情总会一件一件一件一件一件…的做完的。

HTML文本格式化

<b>加粗</b><br><br>
<em>着重文字！（着重文字）</em><br><br>
<i>斜体</i><br><br>
<small>小号字</small><br><br>
<strong>加重语气</strong><br><br>
这是<sub>下标</sub><br><br>
这是<sup>上标</sup><br><br>
<ins>插入字</ins><br><br>
<del>删除字</del>

在这里插入图片描述

HTML链接

HTML使用标签 <a>来设置超文本链接。

<a href="www.baidu.com">百度</a><br><br>
<a href="www.baidu.com" target="_blank">在一个新的页面打开百度</a>

在这里插入图片描述

打开的页面是当前页面的子页面，如何解决这个问题呢？可以在网址前面加上http://或者直接加//即可

点击"在一个新的页面打开百度"后就在一个新的页面打开了链接。

HTML头部

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>.

1）<title> 标签定义了不同文档的标题,在 HTML/XHTML 文档中是必须的。
<title>元素：

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

2）<link>标签定义了文档与外部资源之间的关系。
<link>标签通常用于链接到样式表（CSS）。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

3）<style> 标签定义了HTML文档的样式文件引用地址。

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档。

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

4）<meta>标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="HTML基础 & HTML标签">

定义网页作者:

<meta name="author" content="lee">

每30秒钟刷新当前页面:

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

5）<script>标签用于加载脚本文件，如： JavaScript。

HTML CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式：在HTML元素中使用"style" 属性
内部样式表：在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用：使用外部 CSS 文件
最好的方式是通过外部引用CSS文件。

HTML列表

1）无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签。

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

在这里插入图片描述运行结果如下：
2）有序列表

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

在这里插入图片描述运行结果如下：

3）自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

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

在这里插入图片描述
运行结果如下：

HTML区块

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
1）内联元素。

内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>,<图片>（在这个编辑器里不知道怎么打出img标签,意思就是那个意思吧）
2）<div>元素。
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
3）<span>元素。
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
我变秃了，我也变强了。