初学HTML

文章目录

什么是HTML

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述

HTML 实例

<!DOCTYPE html>       #声明文档类型，
<html lang="en">      #是所有标签的容器，lang表示语言，表示整个文档的内容以什么语言为主  
<head>                 #页面结构的头部，包含辅助显示的标签
    <meta charset="UTF-8"> 
    <title>Title</title>     #页面的标题，在标题栏显示的内容
</head>
<body>                      页面结构的主体，包含在页面中显示的标签

</body>
</html>
<!DOCTYPE>:设置当前文档使用的标准，建议使用HTML5的类型，
HTML标签：用于包裹页面上所有的其他标签
head标签：用于存放title，meta，base，style，script，link标签，这些标签都是用来辅助显示的标签，每个head标签必须有一个title标签
body标签：用于存放所有的页面上的结构标签
title标签：用于设置页面的标题、同时提高SEO的权重
meta标签：设置页面上的字符集（编码格式），utf-8,gb2312
<!--注释内容-->:HTML注释，给代码添加的代码说明性的文字，或者使一些没有必要去掉它的作用
语义化：是指用合理HTML标签以及特有的属性去格式化文档内容

HTML 标签

  1.HTML 标题

HTML 标题是通过 <h1> - <h6> 等标签进行定义的。

实例

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

亲自试一试

  2.HTML 段落

HTML 段落是通过 <p> 标签进行定义的。
实例

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

亲自试一试

  3.HTML 链接

HTML 链接是通过标签<a> 来定义的。

<a href="https://www.baidu.com/">这是一个链接</a>

提示: 在 href 属性中指定链接的地址。

<!--a标签的跨页面进行定位-->
	 <a id="zjm" href="11.html#iii" target="_blank"><h1>......</h1></a>
    <!--href=目标页面的路径,a标签中一定要有内容,target属性设置的是，a标签的跳转方式， 默认值为_self，不保留当前页面，跳转；_blank，保留当前页面，打开一个新的窗口进行跳转-->
   
    <a href="#zjm">点我</a>
上面的a标签的id为zjm，如果我点击‘点我’，页面会定位到上面的a标签，

亲自试一试

  4.HTML 图像

HTML 图像是通过 <img> 标签进行定义的。
实例

<img src="图片地址.jpg" alt="这是图片" title="某某图片" width="700" height="700" />
 <!--src=图片的路径，alt=图片的描述，在图片加载失败后显示， title=图片描述，在鼠标悬停在图片上时会显示-->
通过width，height来设置宽和高，，若只设定一个，会自动等比例缩放，src的路径又分为两种：网页上的一个图片路径和本地的一个图片路径

还可以复制网页图片的地址

<img src="https://www.baidu.com/img/pc_2e4ef5c71eaa9e3a3ed7fa3a388ec733.png" />

亲自试一试

  5.HTML 其他

<br>  #换行
<!--水平线--><hr> #就是单独个一个水平线

亲自试一试

HTML特殊字符

&nbsp;    #空格            &deg;   		#°    
&gt;      #>               &plusmn; 	#±   
&lt;      #<               &divide;	 	#÷   
&amp;     #&               &times; 		#乘号  
&yen;     #¥               &sup2; 		#²平方    
&copy;    #版权标识©       &sup3; 		#³立方     
&reg;     #注册

亲自试一试

HTML列表

<ul type="">      #无序列表，type里面可以给参数，circle，square，，，，代表每行前面的图形
        <!--unorder list，有ul标签，就必须有li标签，而且只能有li标签-->
        <li>苹果</li>
        <li>香蕉</li>
        <li><h1>西瓜</h1></li>
    </ul>
    <hr>
    <ol type="" start="">         #有序列表，type的参数有1，a，A，i，I，代表以那种数字来排序
        <!--order list-->
        <li>一等奖</li>
        <li>二等奖</li>
        <li>三等奖</li>
    </ol>
    <hr>
    <dl>
        <!--definition list-->       #自定义列表，存在明显的从属关系
        <dt>手机品牌</dt>
        <dd>苹果</dd>
        <dd>三星</dd>
        <dd>小米</dd>
        <dt>电脑品牌</dt>
        <dd>苹果</dd>
        <dd>三星</dd>
        <dd>小米</dd>
    </dl>

效果图：

亲自试一试

HTML表格

		border 表格边框的宽度
        width 表格的高度
        height 表格的高度
        cellspacing 边框之间的间歇
        cellpadding 表格中的单元格中的内容跟边框的距离
        align 水平位置，left center right

<table border="1" width="500" height="300" cellpadding="10" cellspacing="2" align="center">
        <caption><h1>帅哥排行</h1></caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tfoot>
            <tr align="center">
                <td >总结</td>
                <td colspan="3"></td>
                <!--rowspan='2' 表示独占列的2个单元格 colspan = '2' 表示独占行的2个单元格-->
            </tr>
        </tfoot>
        <tbody>
             <tr align="center">
            <td>1</td>
            <td >彭于晏</td>
            <td>男</td>
            <td>49</td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>刘德华</td>
            <td>男</td>
            <td>55</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>周杰伦</td>
            <td>男</td>
            <td>45</td>
        </tr>
        </tbody>
<!--table 表格 tr 行 td 行内的单元格 th 表头 caption 表的标题 thead 容纳表的表头 tbody 容纳表的主体内容 tfoot 容纳表的尾巴，一般不出现-->
    </table>

效果图

亲自试一试

HTML表单

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

  1.<form> 元素

HTML 表单用于收集用户输入。<form> 元素定义 HTML 表单：

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

HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

  2.<input> 元素

<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。

类型 描述
text 定义常规文本输入。
radio 定义单选按钮输入（选择多个选择之一）
submit 定义提交按钮（提交表单）

文本输入

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

  文本域

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

<form>

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

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
亲自试一试

  密码字段

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

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

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

  单选按钮输入

<input type=“radio”> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：
实例

<form>
	<input type="radio" name="sex" value="male">选项一
	<br>
	<input type="radio" name="sex" value="female">选项二
</form>

亲自试一试

  复选框

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

<form>
	<input type="checkbox" name="vehicle" value="Bike">选项一
	<br>
	<input type="checkbox" name="vehicle" value="Car">选项二
</form>

亲自试一试

  提交按钮

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

亲自试一试

  文件框:

定义文件选择字段和 “浏览…” 按钮，供文件上传：

<input type="file"> <br>

亲自试一试

  下拉框

	<select id='checkedLevel' style="width:120px;height:28px;" >
　　　　<option value="1">选项1</option>
　　　　<option value="2">选项1</option>
　　　　<option value="3">选项1</option>
　　　　<option value="4">选项1</option>
　　　　<option value="5">选项1</option>
　　　　<option value="6">选项1</option>
　　　　<option value="7">选项1</option>                                                                                                                                                           
　　</select>   
　　

亲自试一试

  多行文本

单行文本框只能够输入一行内容，textarea多行文本框可以输入多行文本。
多行文本框用textarea标签创建，而不是input标签。
通常用于需要输入较多内容的需求。

<textarea rows="5" cols="20" maxlength="10" name="message">
	多行文本框的内容多行文本框的内容多行文本框的内容多行文本框的内容多行文本框的内容多	行文本框的内容多行文本框的内容
</textarea>

上面代码演示了简单多行文本框的应用。

特别说明：name属性是必须的，否则后台无法接收提交的表单数据。

单行文本框还有其他属性，下面分别做一下介绍：

（1）.rows：规定多行文本框的行数。

（2）.cols：规定多行文本框的列数。

（3）.disabled：规定多行文本域是否可用。

（3）.form（HTML5）：规定多行文本域所属的一个或多个表单。

（4）.maxlength：规定文本域可以输入的最大字符数。

（5）.placeholder（HTML5）：提供一种提示，描述所期待的值。

（6）.readonly：设置文本域为只读。

（7）.required（HTML5）：规定文本域内容是必填的。

（8）.autofocus（HTML5）：规定文本域在页面加载后自动获取焦点。

（9）.wrap:（HTML5）：规定当在表单中提交时，文本区域中的文本如何换行。

特别说明：此文本框不能够使用value属性规定它的初始值。
https://www.softwhy.com/article-537-1.html

亲自试一试

  按钮

<form>
	<input type= "button"  value="普通按钮">
	<input type= "reset" value="重置按钮"><!--用于还原用户的输入--> 
	<input type= "submit" value= "提交按钮"><!--点击该按钮，将会跳转到form的action 中的页面-->
</form>

亲自试一试

  HTML <button> 标签(按钮)

实例
以下代码标记了一个按钮：

<button type="button">按钮</button>

<button>标签的属性

  • autofocus：按钮获得焦点，值为：autofocus；
  • disabled：禁用该按钮，值为：disabled；
  • form：关联一个或多个表单，值为：表单的id属性值；
  • formaction：提交表单时向何处发送表单数据，将覆盖form标签中的action属性，需与 - type=“submit” 配合使用，值为：地址；
  • formenctype：向服务器发送表单数据之前如何对其进行编码，将覆盖form表单中的enctype属性，需与type="submit"配合使用，只可以是：multipart/form-data、text/plain等；
  • formmethod：用于发送表单数据的HTTP方法，将覆盖form标签中的method属性，需与type="submit"配合使用，值可以是：get、post；
  • formnovalidate：规定提交表单时不进行验证，将覆盖form标签中的novalidate属性，需与type="submit"配合使用，值为：formnovalidate；
  • formtarget：规定在何处打开目标，将覆盖form标签中的target属性，需与type="submit"配合使用，值可以为：_blank、_self、_parent、_top、framename；
  • name：按钮的名称，值为：自定义；
  • type：按钮的类型，只可以是：button、reset、submit；
  • value：按钮的初始值，值为：自定义；
    四、实例 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>html中
	<button>
		按钮标签详细介绍
	</title>
</head>
<body bgcolor="burlywood">
	<button type="button">
		普通按钮
	</button><br><br>
	<button type="submit">
		提交按钮
	</button><br><br>
	<button type="reset">
		重置按钮
	</button>
</body>
</html>