前端1：HTML学习总结

已于 2023-05-25 16:00:16 修改
阅读量40 收藏
点赞数
分类专栏： 前端 文章标签： 学习
于 2023-05-25 15:58:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48029567/article/details/130863492
版权

目录

1 html

1 链接：

2 head

1 title

2 base：

 3 link：

实例

4 style：

HTML

实例

3 图像

4 表格table

5 无序列表

6 有序列表：

7 div

HTML

元素

1 html

html（内容），hyper text Markup language，超文本标记语言，不区分大小写
html有以下几部分：
html
head：放置html文件的信息，css代码也放在head内。
body：主体标记

2 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

1 链接：

<a href = "https://www.runoob.com/" target="_blank">首页</a>   
target="_blank"：这个属性保证用新tab打开这个目标网址
注意：多个属性之间用空格，而不是用逗号

<base href="https://www.runoob.com/images/" target="_blank">

这个base语句可以保证这个页面的所有link都是用新tab打开

3 注意：同一个页面，有link可以快速跳转到不同区域：id

<a href="#tips">查看小贴士</a>

        <h2><a id="tips">小贴士</a></h2>
        <p>使用#id来跳转到不同区域</p>

2 head

<head> 元素包含了所有的头部标签元素。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

1 title

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

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

2 base：

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

 3 link：

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

实例

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

4 style：

HTML <style> 元素

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

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

实例

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

3 图像

在 HTML 中，图像由<img> 标签定义。

定义图像的语法是：

<img src="url" alt="some_text">

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

在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像。

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

4 表格table

使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

加边框：<table border="1">

表头：th，table head

行：tr, table row

每一列：td，table data

表格标题：caption

   <table border="1">
    <caption>Table title</caption>
    <tr>
        <th>header1</th>
        <th>header2</th>
    </tr>    
        <tr>
            <td>row1, column1</td>
            <td>row1, column2</td>
        </tr>
        
        <tr>
            <td>row2, column1</td>
            <td>row2, column2</td>
        </tr>
    </table>

5 无序列表

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

无序列表使用 <ul> 标签，各个选项使用li标签

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

6 有序列表：

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

    <ol>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ol>

7 div

HTML <div> 元素

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

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

8 span

HTML <span> 元素

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

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

9 html表单：

HTML 表单用于收集用户的输入信息。

10 form表单：

1 文本输入框：<input type="text"

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="password" name="lastname">
</form>

2 单选按钮：<input type="radio" 

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

3 复选按钮：<input type="checkbox"

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

4 提交按钮：<input type="submit" 

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

HTML URL：HTML 统一资源定位器(Uniform Resource Locators)

scheme://host.domain:port/path/filename

说明:

scheme - 定义因特网服务的类型。最常见的类型是 http host - 定义域主机（http 的默认主机是 www） domain - 定义因特网域名，比如 runoob.com :port - 定义主机上的端口号（http 的默认端口号是 80） path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。 filename - 定义文档/资源的名称

2 CSS：

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

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

内联样式- 在HTML元素中使用"style" 属性 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS 外部引用 - 使用外部 CSS 文件

1 内联样式：

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。

<h2 style="background-color:red;font-family:arial;color:red;font-size:20px;text-align:center;">这是一个标题</h2>

2 内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:


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

3 外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。


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

刘大晶
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值