HTML简介笔记

最新推荐文章于 2024-04-03 22:29:48 发布

原创最新推荐文章于 2024-04-03 22:29:48 发布 · 393 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html

前端专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML的基本元素，包括标签如<head>、<body>、<title>、<meta>、<style>、<h>、<p>、<ul>、<ol>、<img>、<a>、<table>、<form>等的使用方法，以及如何创建列表、添加图片、链接和表单，还讲解了文本输入、下拉菜单、按钮的实现。

<html>

html有<head>和<body>，<head>放在<body>前面。
<head>里放<meta>或者<title>等。
<body>中放内容
在html中标签一般都是成对出现，但有的特殊。

1、<head>

其中有<title>标签：里面放文章标题
也有<meta>标签设置当前文件字符编码：例如

<meta charset=“UTF-8”>

2、<body>

<body>中放文本的内容
下面这些也可以不在body中使用，在外面也能用
<h>是标题标签
<h1><h2><h3><h4><h5><h6>
这个标签有一级标签、二级标签等等，一共6个，按照重要性来排
<p>是段落的标签

3、<html>的注释

<!--这里放注释 end-->

4、创建列表

①无序列表

例如

在使用列表的时候就像这样的代码：

<ul>
<li>我的第一个列表</li>
<li>我的第二个列表</li>
</ul>

输出如下结果：

我的第一个列表
我的第二个列表

<ul>是无序列表的意思，ul 是 Unordered List(无序列表)的缩写。
<li>中放的是列表名称，li是List iteam的缩写

②有序列表

有序列表和无序列表没有太大差别
用标签<ol><li>来表示，在网页中的显式中，每项<li>前都自带序号例如：

<ol>
     <li>前端开发面试心法 </li>
     <li>零基础学习html</li>
     <li>JavaScript全攻略</li>
</ol>

输出结果：

前端开发面试心法
零基础学习html
JavaScript全攻略

<ol>代表有序列表，是Ordered List(有序列表)的缩写
同<ul>一样<li>中放列表的名称

5、向网页中添加图片

格式：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
这个title是，当我们的鼠标放在图片上时提示的文字。
这个alt是当图像下载不成功时显式的文本

例如我们添加个索隆图片：

<img src = “https://profile.csdnimg.cn/0/5/8/3_vanliujian” alt = “加载失败” title = “这是海贼王里的索隆”>

运行如下：

总的来说就三个属性：
src：地址
alt：下载失败时显示的文本
title：对图片的描述

6、向网页中添加超链接

使用<a>标签
代码如下：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

例如在这里我们跳转到百度网站。

<a href= "https://www.baidu.com" title="百度网址"> 百度</a>

运行后如下：
百度

注意网址需要写全，把http也带上。链接显示的文本就是用户界面所看见的文字，看上面运行后的结果为百度，那么百度就为链接显示的文本。

7、通过超链接打开网页的界面

当我们通过超链接打开网页时，可以打开一个新的网页，也可以覆盖原来的网页。<a>标签是用来做超链接的。<a>标签有target属性，target有两个选值，"_self"代表在当前页面打开，_blank代表重新打开一个网页,在这个新的网页打开。
不过默认值是_self

① 重新打开一个网页

<a href = "http://www.baidu.com" target = "_blank"> 百度</a>

百度

②在这个页面打开网页

<a href = "http://www.baidu.com" target = "_self"> 百度</a>

百度
//这儿我也不知道能不能打开，我在写笔记的时候打开，不管怎样都是重新打开一个网页，可能是界面不一样，我在记事本中写的时候，就可以在本页面打开。

8、制作表格的第一种方式

例如下面这个代码运行后输出下面那个图：

<table border="10">
<caption>前端三剑客</caption>
<tr> 
<th>知识点</th>
<th>重要程度</th>
<th>难度</th>
<th>学习周期</th>
</tr>
<tr>
<td>html</td>
<td>5星</td>
<td>3星</td>
<td>7天</td>
</tr>
<tr>
<td>css</td>
<td>5星</td>
<td>4星</td>
<td>10天</td>
</tr>
<tr>
<td>html</td>
<td>5星</td>
<td>5星</td>
<td>20天</td>
</tr>

前端三剑客
知识点	重要程度	难度	学习周期
html	5星	3星	7天
css	5星	4星	10天
html	5星	5星	20天

1、其中table中的border属性表示表格线的粗细程度。
2、<caption>表示表格名称
3、<tr>表示表格的行
4、<th>表格的列，字体加为粗体
5、<td>表格的列，字体为正常的文本格式

9、制作表格的第二种方式

为什么会有第二种方式呢？
是因为我们要是等表格加载完成后再看表格，如果那个表格过大就会浪费时间，所以我们现在将表格分段，分段加载，分段显式，就可以节省时间。

使用
<thead> ：表格的开头
<tbody> ：表格的内容
<tfoot> ：表格的结尾
<th><tr><td>在上述已经写过

见下列代码和所运行出的图

<table>
<caption>成绩表</caption>
<thead><tr>
<th>科目</th>
<th>分数</th>
</tr></thead>
<tbody>
	<tr>
		<td>语文</td>
		<td>99</td>
	</tr>
	<tr>
		<td>数学</td>
		<td>200</td>
	</tr>
</tbody>
<tfoot>
	<tr>
		<td>总分</td>
		<td>299</td>
	</tr>
<tfoot>
</table>

成绩表
科目	分数
语文	99
数学	200
总分	299

10、表单的制作<form>

网站与用户进行交互就需要用到表单，表单的作用：把浏览者输入的数据传送到服务器端。
语法：

<form   method="传送方式"   action="服务器文件">

传送的方式有post和get，但最好用post，因为post比较安全。
这里可以看下这个博客更容易理解post和get的区别：
https://www.cnblogs.com/hnrainll/archive/2011/06/07/2074593.html

服务器文件：PHP是一种网页语言。

文本输入框，密码输入框。

text是文本输入；
passworld是密码输入；
name为文本框命名(便于后台使用)
value为文本框赋默认值(起到提示作用)

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

下面用QQ账号作为例子：

<form method = "post" action = "save.php">
QQ账号<input type = "text" name = "账号文本" value = "请输入账号" />   <br />
QQ密码<input type = "passworld" name = "密码" value = "请输入您的qq密码" />
</form>

运行如下：

在这里插入图片描述

11、<input>

占位符 placeholder

有时候需要提示用户输入框的，就需要用到占位符。
placeholder与value，placeholder并不会被表单提交，只有value为空时placeholder才显示出来。
placeholder的例子：

<input type = "text" placeholder = "请输入用户名"><br />
<input type = "text" placeholder = "请输入密码">

数字框的输入

<input type = "number">

网址输入框

里面只能放http://或https://开头,如果不以这些开头会报错。

<input type = "url">

邮箱输入框

其中必须包含@，@后必须有内容，否则会报错误提示。

<input type = "email">

12、文本输入

当用户需要在表单中输入大段的文字时，需要用文本输入。
<textarea>标签有cols和rows属性
cols：列数
rows：行数
举例：

<form  method="post" action="save.php">
    <label>联系我们</label>
    <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>

输出结果：
在这里插入图片描述

13、<lable>标签 ***

语法：

<label for="控件id名称">

其for属性的值必须与控件的id属性值相同如下：

<form>
    <label for="uname">输入你的用户名</label>
	<input type="text" id="uname" placeholder="Enter uname">
	<br>
	<label for="pass">输入你的密码</label>
	<input type="password" id="pass" placeholder="Enter password">
</form>

14、单选框和复选框

语法：

<input   type="radio/checkbox" 
value="值"    name="名称"   checked="checked"/>

1、radio表示单选框，checkbox表示复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked=“checked” 时，该选项被默认选中

15、下拉菜单

使用select和option标签创建下拉菜单
option(可选择的事物，选择，选择权，选修课)
select(选择，挑选，选拔)
当设置selected="selected"时，该选项就被默认选中。

<form>
    <select>
        <option value="看书">看书</option>
        <option value="旅游" selected = "selected">旅游</option>
        <option value="运动">运动</option>
        <option value="购物">购物</option>
    </select>
</form>

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

16、提交与重置按钮

提交按钮语法：

<input   type="submit"   value="提交">

只有type为submit时才有提交作用，value为按钮上显示的文字。

重置按钮语法：

<input type="reset" value="重置">

同样，只有type为reset时才有重置作用，value还是按钮上显示的文字。

零散知识点

<div>把独立的逻辑部分拿出来
<header>头部标签，和div差不多
<footer>用来定义底部区域，作用和<header>差不多
<section>标签用来定义一个区域，和<header>差不多
<span>标签，在使用之前要在style中声明一下 
    span { 
	    color:blue;
    }
<aside>侧边栏标签
<br />是换行符，在html中换行和空格全是省略的
&nbsp;是空格符