前端学习之HTML

本文详细介绍了HTML的基础知识,包括简单的框架结构、链接、图像、元素、属性、标题、段落、样式、表格、列表和头部元素。特别强调了HTML表单的使用,讲解了不同类型的输入元素、属性及其作用,如text、password、submit、radio、checkbox等,以及表单验证、提交方式等相关属性。
摘要由CSDN通过智能技术生成


前言

最近开始学习前端,记录一下学习历程。末流211研一在读,卷不动算法了,决定前端了,现在开始努力学习,希望能找一份好工作。
本科时小学过一段时间,但大多已经忘记。html部分较为简单,但还是做个笔记加深印象。


一、HTML

HTML 是用来描述网页的一种语言。

二、HTML基础

1.简单框架

<html>
<body>

<h1>标题</h1>

<p>段落</p>
</body>
</html>

<html>标签之间的文本描述网页
<body>之间的文本是可见的页面内容,也就是网页上显示的
<h1>为网页的标题,其中的文字会自动为标题的大小
<p>这是段落标签

2.HTML链接

<a href="http://www.w3school.com.cn">This is a link</a>

<!--用图像来作为链接 -->
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

<!--使用target属性,链接将会在新窗口打开 -->
<a href="www.baidu.com"target="_blank">百度</a>

其中href后的属性为网址,标签中的文字为网页上所显示的文字,点击一下这个文字会跳转到这个网页上。

3.HTML图像

<img src="/i/eg_w3school.gif" width="300" height="120" alt="Big Boat" />

src也就是source,后面的属性是图像的地址,可以是相对路径,也可以是绝对路径,后面的width和height是用来定义图像的大小的。alt属性是用来将图像定义为遗传预备的可替换的文本,也就是当浏览器无法加载图片的时候,会显示alt所定义的信息。

4.HTML元素

元素就是指从开始标签到结束标签中的所有代码。一个<></>即为一个元素。
没有内容的HTML元素就被成为空元素,空元素直接在开始标签中关闭。例如</br>

5.HTML属性

html标签可以拥有属性,属性提供了有关元素的更多的信息,在开始标签中规定。且一般是名称/值的格式。比如上文中定义图像等。另外可以定义文本的背景颜色、居中格式等。
注意:属性值加引号
下面列举一些基本的属性:
class规定元素的类名,值为classname
id规定元素的唯一id,值为id
style规定元素的行内样式,值为style_definition
title规定顶元素的额外信息,值为text

6.HTML标题

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

注意:标题标签只用于标签文本,不要仅仅是为了产生粗体文本而去使用它。其中h1是最重要的。

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

<hr>标签是会增加那一条水平线。
HTML注释

<!--This is a comment -->

7.HTML段落

<p>This is a paragraph</p>
<p>This is another paragraph</p>

此时浏览器会自动在段落前后添加空行。但是不要直接在<p>标签之间直接加入空行,可以加入<br/>,也在可以在文本中直接加上这个标签。

8.HTML样式

使用的是style属性,也可以在最后的css中去定义样式。

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
<h1 style="text-align:center">This is a heading</h1> #文本水平对齐
</body>

如果想要放代码的话,可以使用预格式标签<pre>,会保留格式。

<pre>
for i = 1 to 10
     print i
next i
</pre>

对元素定义样式有三种方法:

  1. 内部样式表:
<html>

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>

</html>

  1. 外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
  1. 内联样式
<p style="color:red;margin-left:20px">
This is a paragraph
</p>

9.HTML表格

<table border="1">
<tr>
<th>Heading</th>
<th>Anotherong Heading</th>
</tr>
<tr>
<td>row1,cell1</td>
<td>row1,cell2</td>
</tr>
<tr>
<td>row2,cell1</td>
<td>row2,cell2</td>
</tr>
</table>

<th>为表头元素,可以理解为一个<tr>就是一行,每一个<td>就是其中的一个元素。
表格中也允许有空单元素。但最好使用&nbsp;,否则在浏览器中会不显示, 那个元素的该有的都不会显示。
不设置border的话就会没有边框。
下面的例子为一个带有标题的表格

<table border="1">
<caption>我的标题</caption>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

上面的例子是水平的表头,如果想要垂直的表头没那么就需要在每个一列里面第一个去输入表头。

也可以定义一些跨行或者跨列的表格

<h4>横跨两列的单元格:</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>   #行的话改成rowspan
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

10.HTML列表

  1. 无序列表
<ul type="circle">   #为空心圆,type标签可以定义元素前面的符号
	<li>咖啡</li>
	<li></li>
	<li>牛奶</li>
<ul>
  1. 有序列表
<ol start="50"/ type="A">    #表示用50开始/从A开始
<li>咖啡</li>
<li>牛奶</li>
<li></li>
<ol>
  1. 定义列表
    定义列表是一列列项目加上对他的注释。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

另外也可以自己去定义一些嵌套列表,直接套娃就行。

11.HTML头部元素

<head>元素是所有头部元素的容器,可包含<title><base><link><meta><script> 以及 <style>

  1. <title>,定义文档的标题,可以定义浏览器工具栏中的标题、提供页面被添加到收藏夹时显示的标题、显示在搜索引擎结果中的页面标题。
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>
  1. <base>为页面上的所有链接规定默认地址或者默认目标
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
  1. <link>标签定义文档与外部资源之间的关系,常用于连接样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
  1. <style>标签用于为HTML文档定义样式信息,也就是上面讲的定义样式。
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
  1. <meta>元素
    metadata即为元数据,也就是关于数据的信息,<meta>提供关于HTML文档的元数据,这些元数据不会显示在页面上,但是对于机器是可读的。meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
    下面为meta元素定义页面的描述:
<meta name="description" ceontent="Free Web tutorials on HTML,CSS,XML"/>

下面为meta元素定义页面的关键词

<mata name="keywords" content="HTML,CSS,XML"/>
  1. <script>元素
    用于定义客户端脚本,比如javascript

12.HTML框架

  1. 垂直框架
<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>
  1. 水平框架
<html>

<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

三、HTML表单

1.HTML表单

html表单用于搜集不同类型的用户输入,表单元素指不同类型的input元素、复选框、单选按钮、提交按钮等

  1. <form>元素
    用于定义元素表单
<form>
.
form elements
 .
</form>
  1. <input>元素
    是最重要的表单元素,他的元素有很多形态,比如text(定义常规文本输入),radio(用于定义单选按钮输入,也就是在多个选择中选择一个),submit(定义提交按钮,也就是提交表单)。下文将介绍这几种。
  2. 文本输入<input type="text">定义用于文本输入的单行输入字段
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
  1. 单按钮输入
    <input type="radio">定义单选按钮,单选按钮允许用户在有限数量中去选择其中之一。
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
  1. 提交按钮
    <input type="submit">定义用于向表单处理程序提交表单的按钮,表单处理程序通常是包含用来处理输入数据的脚本的服务器页面
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。</p>
  1. Action属性用于定义在提交表单时的执行的动作,向服务器提交表单通常的做法是使用提交按钮,一般,表单会被提交到web服务器上的网页。
    比如下面的例子就是制定了某个服务器的脚本来处理被提交的表单。
<form action="action_page.php">
  1. method属性
    规定在提交表单时所用的HTTP方法(GET或者POST)
<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">

这里,GET以及POST的使用我不太懂。大概就是当表单提交是被动的且没有敏感信息,就是用GET,若是表单正在更新数据,或者包含敏感信息,那么使用POST。也即POST安全性更好。

  1. Name属性
    如果要正确地被提交,那么每个输入字段必须设置一个name属性。比如上面的例子。

  2. <filedset>组合表单数据

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>![请添加图片描述](https://img-blog.csdnimg.cn/350a6f0054e24b568dca335884a9ea94.png)

<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 
  1. Target属性
    target属性规定提交表单后在何处显示相应。
    在这里插入图片描述

  2. Autocomplete属性
    规定表单是否应打开自动完成功能,启用自动完成功能以后,浏览器会根据用户之前输入的值自动填写值。

<form action="/action_page.php" autocomplete="on">
  1. Novalidate属性
    布尔属性,若已经设置,它规定提交时不应验证表单数据。

2.HTML表单元素

  1. <input>元素,根据不同的type属性,可以变化为多种形态。
  2. <select>元素,下拉列表
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<option>元素定义待选择的选项,列表通常会把首个选项为被选项,

  1. <textarea>元素定义多行输入字段(文本域)
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
  1. <button>元素定义可点击的按钮
<button type="button" onclick="alert('Hello world。")">Click Me</button>

点击以后将会出现hello world的弹窗。

  1. <datalist>元素
    为规定预定义选项的下拉列表
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
	<option value="1">
	<option value="2">
	<option value="3">
	<option value="4">
</datalist>
</form>

这样会得到一个没有与选项的下拉框选择。

3.HTML输入类型

  1. 输入类型:text
    <input type="text">定义供文本输入的单行输入字段
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="test" name="lastname">
</form>
  1. 输入类型:password
    <input type="password">定义密码字段
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
  1. 输入类型:submit
    定义提交表单数据至表单处理程序的按钮。表单处理程序一般是包含处理输入数据的脚本的服务器页面。在表单的action属性中规定表单处理程序。
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 
  1. 输入类型:radio
    <input type="radio">定义单选按钮.
    这个按钮让使用这只选择唯一的选择。
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 
  1. 输入类型checkbox
    定义复选框,复选框允许用户在有限数量的选择中选择0或者多个选项。
<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> 
  1. 输入类型:button
    定义按钮
<input type="button" onclick="alert('hello world')"value="click me">
  1. 输入类型:number
    <input type="number">用于应该包含数字值的输入字段,能够对数字做出限制。
<form action="/demo/demo_form.asp">
  数量(1 到 5 之间):
  <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

这样会出现一个选择框,只能选择或者输入1到5。

  1. 输入类型:data
    <input type="data">用于应该包含日期的输入字段
<form>
birthday
<input type="data" name="bday">
</form>

也可以添加一些限制

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>
  1. 输入类型:color
    <input type="color">用于 应该包含颜色的输入字段。
<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>
  1. 输入类型:range
    <input type="range">用于应该包含一定范围内的值的输入字段。
<form action="/demo/demo_form.asp" method="get">
  Points:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>

这样会得到一个可滑动的滑件可以选择大小。

  1. 输入类型:month
    <input type="month">允许用户选择月份和年份
<form>
birthday(month and year):
<input type="month" name="bdaymonth">
</form>
  1. 输入类型:week
    <input type="week"> 允许用户选择周和年。
<form>
select a week:
<input yupe="week" name="week_year">
</form>
  1. 输入类型:time
    <input type="time"> 允许用户选择时间(无时区)。
<form>
select a time:
<input type="time" name="usr_time">
</form>
  1. 输入类型:datetime
    <input type="datetime"> 允许用户选择日期和时间(有时区)。
<form>
birthday(data and time)
<input type="datatime" name="bdaytime">
</form>
  1. 输入类型:email
    <input type="email"> 用于应该包含电子邮件地址的输入字段。能够在被提交时自动对电子邮件地址进行验证。
<form>
e-mail:
<input type="email" name="email">
</form>
  1. 输入类型:search
    <input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。
<form>
search google:
<input type="search" name="googlesearch">
</form>
  1. 输入类型:tel
    <input type="tel"> 用于应该包含电话号码的输入字段。
<form>
telephone:
<input type="tel" name="usrtel">
</form>
  1. 输入类型:url
    <input type="url"> 用于应该包含 URL 地址的输入字段。在提交时能够自动验证url字段
<form>
add your homepage
<input type="url" name="homepage">
</form>

4.HTML输入属性

  1. value属性
    规定输入字段的初始值
<form action="">
First name:<br>
<input type="text" name="firstname" value="bill">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

这样的会在输入框中firstname会有个初始值bill

  1. readonly属性
    规定输入字段为只读,那么就不能进行修改。
<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

比上面的代码只多了readonly,这样我们只能看见bill,而不能在后面添加或者修改。另外,readonly不需要值,等同于readonly=“readonly”。

  1. disabled属性
    规定输入字段是禁用的,被禁用的元素是不可用也不能点击的,并且被禁用的元素不会被提交。
<form action="">
first name:<br>
<input type="text" name="firstname" value="bill" diasbled>
<br>
last name:<br>
<input type="text" name="lsatname">
</form>

这样那个first name窗口将无法点击。

  1. size属性
    固定输入字段的尺寸,以字符来计算
<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 
  1. maxlength属性
    规定输入字段允许的最大长度,
    size和maxlength的区别:
    size:设定文本框的长度,对内容输入长度无限制
    maxlength:设定文本的最大输入长度
<form action="">
 First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 
  1. autocomplete属性
    规定表单或素如字段是否应该自动完成,当自动完成开启,浏览器就会基于用户之前的输入值自动填写之。
<form action="action_page.php"autocomplete="on">
First name:<input type="text" name="fname"><br>
last name:<input type="text" name="lname"><br>
e-mail:<input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>

这样在第二次进入输入页面的时候,前两项会记住你上次输入的内容,但email则不会。

  1. novidate属性
    规定在提交表单时不对表单数据进行验证。
<form action="action_page.php"novalidate>
e-mail:<input type="email" name="user_email">
<input type="submit">
</form>

这样在输入email时不会出现类似检查@的验证。

  1. autofocus属性
    为布尔属性,设置以后规定当页面加载时<input>元素应该自动获得焦点。
First name:<input type="text" name="fname" autofocus>

通俗点理解就是,当你现在在这个框上输入时,这个框会自动变成焦点。

  1. form属性
    规定<input>元素所属的一个或多个表单 ,如果需要引用一个以上的表单,需要使用空格分割的表单id列表
<form action="action_page.php" id="form1">
first name:<inout type="text" name="fname"><br>
<input type="submit" value="submit">
</form>
last name:<input type="text" name="lname" form="form1">

这里输入字段虽然位于表单之外,但是他仍然属于表单。

  1. formaction
    规定当提交表单时处理该输入控件的文件的url,该属性会覆盖掉<form>元素的action属性。且该属性适用于 type=“submit” 以及 type=“image”。
<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form> 
  1. formenctype属性
    规定当把表单数据(form-data)提交到服务器时如何对其进行编码(仅仅只正对method="post"的表单),且覆盖<form>元素的enctype属性。适用于 type=“submit” 以及 type=“image”。
<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data"
   value="Submit as Multipart/form-data">
</form> 

第二个提交按钮将会发送默认编码以及编码为为 "multipart/form-data"的表单数据。

  1. formmethod属性
    定义用action URL发送表单数据的http方法,会覆盖<form>元素的method属性,且该属性适用于 type=“submit” 以及 type=“image”。
<form action="action_page.php" method="get">
first name:<input type="text" name='fname"><br>
last name:<input type="text" name="lname"><br>
<input type="submit" value="submit">
<input type="submit" formmethod="post" formation="demo_post.asp"
value="Submit using post">
</form>

第二个按钮将提交覆盖表单的http方法。

  1. formnovalidate属性
    为布尔属性,如果设置,那么规定在提交表单时不对<input>元素进行验证,会覆盖<form>元素的novalidate属性。可用于 type=“submit”。
<form action="action_page.php">
e-mail:<input type="email" name="userid"><br>
<input type="submit" value="submit"><br>
<input type="submit" formnovalidate value="submit without validation">
</formm>

将会得到一个验证和一个不验证的提交按钮。

  1. formtarget属性
    规定的名称或关键词只是提交表单后在何处显示接收到的响应, 会覆盖 <form> 元素的 target 属性。可与 type=“submit” 和 type=“image” 使用。
<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank"
   value="Submit to a new window">
</form> 

将得到两个提交按钮,第二个将会提交到新的窗口。

  1. height和width
    规定<input>元素的高度和宽度 ,仅用于 <input type="image">
    注意:始终都需要规定图片的大小,因为如果浏览器不清楚图像的尺寸,那么页面会在图像加载时闪烁。
<input type="image" src="img_submmit.gft" alt="Submmit" width="48' height='48'>
  1. list属性
    list属性引用<datalist>元素中包含了<input>元素的预定义选项。
<input list="browsers">
<datalist id="browsers">
<option value="1">
<option value="2">
<option value="3">
</datalist>
  1. min和max属性
    规定了<input>元素的的最小值和最大值。min 和 max 属性适用于如需输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

 Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

 Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
  1. multiple属性
    为布尔,若设置,那么规定允许用户在<input>元素中输入一个以上的值,multiple属性适用于一下输入类型:email和file.
Select images: <input type="file" name="img" multiple>

接受多个文件上传

  1. pattern属性
    规定用于检查<input>元素值的正则表达式,pattern属性适用于一下输入类型:text、search、url、tel、email、and password。
Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

以上为只能包含三个字母的输入字段(无数字或特殊字符)

  1. placeholder属性
    规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述),该提示会在用户输入值之前显示在输入字段值中。适用于以下输入类型:text、search、url、tel、email 以及 password。
<input type="text" name="fname" placeholder="First name">

将会得到一个输入文本框,但是上面会显示First name

  1. required属性
    布尔属性,若设置,那么会规定在提交表单之前必须填写输入字段,required 属性适用于以下输入类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
username:<input type="text" name="usrname" required>

那么这个将会是一个必须要输入的字段。

  1. step属性
    规定<input>元素的合法数字间隔。
    比如,如果设置为3,那么合法数字为-3,0,3,6等。step 属性适用于以下输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。
<input type="number" name="points" step='3">

总结

从算法转前端,第一感觉就是快乐,希望自己能够坚持下去

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值