HTML入门——标签，链接，图片，表格，输入框和选择框

最新推荐文章于 2024-04-30 17:59:49 发布

是挺秃然的齐齐哦

最新推荐文章于 2024-04-30 17:59:49 发布

阅读量691

点赞数 3

分类专栏： web开发文章标签： html html5 css

本文链接：https://blog.csdn.net/MrChen666/article/details/120169659

版权

web开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本篇博客将初步讲解HTML的基本标签内容，由于HTML相对比较简单，因此很多东西就不展开说说了。

先来说一下什么是HTML，HTML就是超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。所有的网站都是由HTML经过浏览器的内核渲染后看到的，因此HTML可以理解为网站的底层代码。HTML不是编程代码，而是一种标记语言，有着严格的格式，下面会跟大家展开说说。

先来说一下HTML最基本的框架。下面是html的基本格式，后续都是在body中改动。

<html>
	<head>
		<title>页面标题</title>
	</head>
	<body>
		<h1>这是一个标题</h1>
		<p>这是一个段落。</p>
		<p>这是另外一个段落。</p>
	</body>
</html>

在这里插入图片描述

接下来着重讲html中最重要的标签。首先是用于显示文字的一些标签。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试网页</title>
	</head>
	<body bgcolor=pink>
		long time</br>    #br标签只有尾标签，用于换行，类似于编程中的\n
		很长一段时间</br>
		<p>嘿嘿嘿,很长一段时间里，测试一下会不会换行，下面都是废话，废话都是废话，废话中的废话</p>
		#p标签非常常见，显示正常字体的标签
		<p>芜湖</p>
		<a href="https://www.baidu.com/">百度</a>  #a标签为超链接
		<a href="https://www.baidu.com/" target="_blank">加上target标签后网站可以在新的标签页打开</a>
		</br>
		<b>粗体</b>   #b标签，加粗字体，注意是加粗，不是加大
		</br>
		<big>大字体</big>  #这个big标签才是加大字体
		</br>
		<em>强调字</em>  #em标签，强调字字体，具体样子可以看下面在浏览器中显示的样子
		</br>
		<i>斜体</i>   #i标签，斜体字体
		<pre>
		<small>小字体</small>  #small标签，顾名思义，小字体
		</pre>
		<p></p>
		<!-- 注释，并不会显示在文本中 -->    #<!-- ... -->注释标签
		<strong>加重语句</strong>    #strong标签，加重语句，具体字体样式其实跟加粗差不多
		<h1 align="center">居中对齐<h1>   #lalign属性：排列方式,常见有center，left，right
		<h1 style="font-family:verdana">style字体样式</h1>
		<h1 style="font-family:arial;color:red;font-size:30px;">详细字体样式<h1>
		<a href="http://www.baidu.com"><img src="picture.png"></a>
		</br>
		<a href="http://www.baidu.com" target="_blank">超链接,会在新的页面打开</a>
		</br>
		<a href="http://www.baidu.com" title="跳转到百度">链接提示语</a>
		</br>
		<a href="#c1">书签一链接</a>  #这是一种书签链接，格式为# + name，即跳转到下面第一个name等于c1的a标签
		<p>lalalaalalal</p>
		<p>
		</p>
		<h1><a name="c1">书签一</a></h1>
	</body>
</html>

在这里插入图片描述

上面通过不同标签实现不同字体和链接，以及一些属性修改产生不同布局，内容非常简单，接下来介绍一下表格。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格网页</title>
</head>

<body style="font-size:30px">
    <p style="text-align:center">表格</p>
    <table  align="center" border="15" cellpadding="10" bgcolor="pink"> #表格的标签为table，非常好记忆
        <caption style="font-size:40px">表格标题</caption> #caption标签为表格标题
        <th align="center" colspan="3">表头</th>
        <tr>  #tr标签表示一行
         	<td align="center" colspan="2">第一行，第一二列</td>  #td标签表示一个格子，其中colspan属性表示占用的列数，这里表示第一行占用第一二列
         	<td>第一行第三列</td>
         </tr>
         <tr>
         	<td rowspan="2">第二和三行和第一列 </td>  #
            <td>第二行和第二列 </td>
            <td >第二行和第三列</td>
         </tr>
         <tr>
         	<td>第三行和第二列 </td>
         	<td>第三行和第三列 </td>
         </tr>
        </table>   
</body>
</html>

在这里插入图片描述

表格的内容非常简单，只要记得总标签<table>，然后里面每一行用<tr>标签标识，每一个格子用<td>标识。接下来讲一下图片，图片其实更加简单。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片测试网页</title>
</head>

<body>
	<p>let's have an example<img src="https://img.php.cn/upload/course/000/000/004/5839303f92197305.jpg" width="80" height="80"</p>
	<!-- 图片其实非常简单，主要由src构成，src可以理解为图片的链接，我们通过链接把图片展示出去 -->
	<!-- 图片中width属性设置图片的宽度，height设置图片的长度 -->
    <p> align top<img src="https://img.php.cn/upload/course/000/000/004/5839303f92197305.jpg" align="top" ></p>
    <p>align middle<img src="https://img.php.cn/upload/course/000/000/004/5839303f92197305.jpg" align="middle"></p>
    <p>align left<img src="https://img.php.cn/upload/course/000/000/004/5839303f92197305.jpg" align="left" ></p>
</body>
</html>

在这里插入图片描述

说完了图片，我们再说一下列表，列表其实也是非常简单，包括自定义和默认，其中自定义由<ol>标签标识，而默认由<dl>标签标识，其中默认是没有序号的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表网页</title>
</head>

<body style="font-size:20px;background-color:lightpink">
<ol start="2">  #列表外面由ol标签标识，默认是由1开始，start属性表示从多少开始
    	<li>hadoop</li>  #列表每一列由li标签来标识
    	<li>linux</li>
    	<li>c </li>
    </ol> 
<ol type="a">  #type属性表示改变计数的符号，这里表示从a开始
    	<li>hadoop</li>
     	<li>linux</li>
     <li>c </li>
</ol>     
 <ol type="A">
     	<li>hadoop</li>
     	<li>linux</li>
     	<li>c </li>
</ol>       
<ol type="i">
     	<li>hadoop</li>
     	<li>linux</li>
     	<li>c </li>
</ol> 
<ol type="I">
     	<li>hadoop</li>
     	<li>linux</li>
     	<li>c </li>
</ol>
<dl>
	<dt>中国城市</dt>
	<dd>广州</dd>
		<ol>
			<li>番禺区</li>
			<li>天河区</li>
		</ol>
	<dd>上海</dd>
</dl>
</body>
</html>

在这里插入图片描述

接下来我们讲一下非常重要的页面布局。布局其实就是对一个页面进行分割，相应的位置放置不同的内容，就拿B站来说，上方放置一些a标签的索引，中间部分为视频推送，右边为主页各个分区的索引。结合前面的知识，我们知道其实表格也可以做到页面分割，实现布局，接下来先展示由table为基础的布局。

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>table布局页面</title>
</head>
<body>
<table width="1200" height="900" align="center">
    <tr>
        <td colspan="2" style="background-color: royalblue">
            <h1 align="center">php中文网</h1>
            <p>测试一下p标签所在位置会怎么样</p>
            <p>测试一下p标签所在位置会怎么样</p>
            <p>测试一下p标签所在位置会怎么样</p>
        </td>
    </tr>
    <tr valign="baseline">
       <!-- valign标签表示水平方向的格式，top表示在顶部，bottom表示在底部，baseline基于线对齐 -->
        <td style="background-color: darkorange;width:300px">
          <dl>
              <dt>list of book</dt>
              <dd>
                  <ol>
                      <li>hadoop</li>
                      <li>linux</li>
                      <li>c</li>
                      <li>java</li>
                      <li>mysql</li>
                  </ol>
              </dd>
          </dl>
        </td>
        <td style="background-color: forestgreen;height:500px;width:700px;">
            <h1 style="font-size: 20px;text-align: center">the summary of the book</h1>
        i will lead you to travel in the season of linux
        <br>
        巴拉巴拉巴拉巴拉
        </td>
    </tr>
    <tr>
        <td colspan="2" style="background-color: powderblue;text-align:center;height: 100px">
            good good study day day up</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

下面将分享div布局，该布局非常适合CSS编写的网站，因为div标签包含id，可以通过变量名标识到具体的div标签。其实div只要在head中的style标签把不同div标签的格式，字体颜色等说明好就行了，非常实用！

<!doctype html>
<html>
<head>
<style>
 	div#container{width:1000px}
 	div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}
 	div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}
	div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}
 	div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}
 </style>
<meta charset="utf-8">
<title>div布局页面</title>
</head>

<body>

<div id="container">
 	<div id="header">
 		<h1>php中文网</h1>
 </div>
 
 <div id="sidebar">
 	<dl>
 		<dt>list of book</dt>
 		<dd>
 			<ol>
 				<li>hadoop</li>
 				<li>linux</li>
 				<li>c</li>
 			</ol>
 		</dd>
 	</dl>
 </div>
 
 <div id="mainbody">
 	<h1>the summary of the book</h1>
 	<p>i will lead you to travel in the season of linux</p>
 </div>
 
<div id="footer">good good study day day up</div>
</div>

</body>
</html>

在这里插入图片描述

当用户在网上输入用户名和密码时，网页需要一些标签来接收用户的输入，此时先要引入form(表单)概念。

<form    method="post"   action="save.php">
      姓名：
  	<input type="text" name="myName">
  	<br/>
 	 密码：
 	 <input type="password" name="pass">
</form>

在这里插入图片描述

属性	功能
action	浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php
method	数据传送的方式（get/post）
type	当type="text"时，输入框为文本输入框，当type="password"时, 输入框为密码输入框。
name	为文本框命名，以备后台程序ASP 、PHP使用。
value	为文本输入框设置默认值。(一般起到提示作用)

在网页中，还会有很多类似选项的东西来选择，这就要用到单选框和复选框了，用法很简单，也是由input标签标记，只不过type要改变一下。

<form action="save.php" method="post" >
 <label>性别:</label>
 <label>男</label>
 <input type="radio" value="1" name="sex" />
 <label>女</label>
 <input type="radio" value="2" name="sex" />
</form>

<form action="save.php" method="post" >
 <label>多选科目:</label>
 <label>数学</label>
 <input type="checkbox" value="1" name="subject" checked="checked" />
 <label>语文</label>
 <input type="checkbox" value="2" name="subject" />
 <label>英语</label>
 <input type="checkbox" value="2" name="subject" /> 
</form>

在这里插入图片描述

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

除了简单的勾选，还有下拉选择这种选择方式。多选其实也是由select标签标记，其中选项由option标记。

<form action="save.php" method="post" >
 <label>爱好:</label>
 <select>
 <option value='看书'>看书</option>
 <option value='旅游' selected="selected">旅游</option>
 <option value='运动'>运动</option>
 <option value='购物'>购物</option>
 </select>
</form>

在这里插入图片描述

是挺秃然的齐齐哦

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML入门——标签，链接，图片，表格，输入框和选择框

本篇博客将初步讲解HTML的基本标签内容，由于HTML相对比较简单，因此很多东西就不展开说说了。先来说一下什么是HTML，HTML就是超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。所有的网站都是由HTML经过浏览器的内核渲染后看到的，因此HTML可以理解为网站的底层代码。HTML不是编程代码，而是一种标记语言，有着严格的格式，下面会跟大家展开说说。先来说一下HTML最基本的框架。下面是html的基本格式，后续都是在body中改动。<html
复制链接

扫一扫