python全栈工程师之前端 HTML(一)

最新推荐文章于 2020-12-17 13:31:56 发布

代码随想随记

最新推荐文章于 2020-12-17 13:31:56 发布

阅读量324

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/woai8339/article/details/104691185

版权

最近接到领导一个前端需求，what？炼丹师（算法）要去搞前端？不会啊，怕啥，学，撸起袖子一把辛酸一把泪地学习起前端了，，，就学 HTML 吧，参考资料： [HTML 菜鸟教程](https://www.runoob.com/html/html-basic.html)

格式

先说 html 的格式，html主要是由三个部分组成：声明、head 和 body。

声明

一般声明如果是HTML5的话，那么声明即为：

<!DOCTYPE html>
<html>
</html>

head

head中主要定义 title和编码meta。
title一般用来定义标题，meta一般定义网页编码。
<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: ,

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>

body

<body> 元素定义了 HTML 文档的主体。

标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。比如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

段落

段落是指 body正文中的一部分，是以<p> </p>的形式存在的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

</body>
</html>

链接

链接是指在网页正文中显示一个有个超链接，是以<a> </a>来定义的。
链接的地址在 href属性中指定。
具体来说，

<a href="url">链接文本</a>

比如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<a href="https://www.runoob.com">这是一个链接使用了 href 属性</a>

</body>
</html>

图像

HTML 图像是通过标签 <img> 来定义的.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<img src="/images/logo.png" width="258" height="39" />

</body>
</html>

水平线

HTML水平线用hr来表示。

<hr>

就会产生一条横线。

换行

HTML中采用<br>来表示换行。

加粗

加粗在HTML中采用<b>(“bold”) 来体现。

<b>加粗文本</b>

斜体

加粗在HTML中采用<i>(“italic”) 来体现。

<i>斜体文本</i>

上下标

<sub> 下标</sub>
<sup> 上标</sup>

表格

表格内容在 HTML 中采用<table>来表示。
其中，border 表示外表格框线的粗细。
<tr>表示每一行的内容
<td>表示每一列的内容
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
下面表示的是两行三列的内容：
100 200 300
400 500 600
这个表格：

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

有时候表格定义的时候也需要表头，表格的表头使用 <th>标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本。
在这里插入图片描述
上述表格的HTML描述如下：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

列表分无序列表、有序列表和自定义列表。

无序列表

无序列表(此列项目使用粗体圆点（典型的小黑圆圈）进行标记。)一般用<ul> 标签。每个列表项始于 <li>标签。
比如，下图的无序列表 milk 和 coffee 表示如下：
在这里插入图片描述

<ul>
<li>milk</li>
<li>coffee</li>
<ul>

有序列表

有序列表与无序列表类似，区别在于标记时有 1、2、3。有序列表一般用<ol> 标签。每个列表项始于 <li> 标签。
比如，

milk
coffee
这个用HTML来实现就是如下：

<ol>
<li>milk</li>
<li>coffee</li>
</ol>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl>标签开始。每个自定义列表项以 <dt>开始。每个自定义列表项的定义以<dd>开始。

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

浏览器显示如下：

Coffee
- black hot drink
Milk
- white cold drink

表单

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

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

表单使用表单标签<form> 来设置:

<form>
.
input 元素
.
</form>

HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域

文本域是通过<input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

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

浏览器显示：

First name:
Last name:

注意:表单本身并不可见（Last name: 后面有个框）。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签<input type="password">来定义:

<form>
Password: <input type="password" name="pwd">
</form>

浏览器显示效果如下:

Password:
注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

浏览器显示效果如下:
Male
Female

复选框（Checkboxes）

input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

浏览器显示效果如下:

I have a bike
I have a car

提交按钮(Submit Button)

<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>

浏览器显示效果如下:

Username:

script 标签

<script> 标签用于定义客户端脚本，比如JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出"Hello World!"：

<script>
document.write("Hello World!");
</script>

代码随想随记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
python全栈工程师之前端 HTML(一)

前端 HTML格式声明headbody标题段落链接图像水平线换行加粗斜体上下标表格列表无序列表有序列表自定义列表表单文本域密码字段单选按钮（Radio Buttons）复选框（Checkboxes）提交按钮(Submit Button)script 标签最近接到领导一个前端需求，what？炼丹师（算法）要去搞前端？不会啊，怕啥，学，撸起袖子一把辛酸一把泪地学习起前端了，，，就学 HTML 吧，参...
复制链接

扫一扫