很高兴在这个平台分享我的第一篇文章，接下来的几天，我将就初学HTML与大家分享，希望大家不吝赐教。
目录
前言
初学日记
什么是HTML?
HTML（HyperText Markup Language，超文本标记语言） 是一种描述语言，用来定义网页结构。
HTML 文档是包含多个 HTML 元素 的文本文档。每个元素都用一对开始和结束 标签 包裹。每个标签以尖括号（<>）开始和结束。
HTML的基础标签
p 段落标签
HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。
p>这是第一个段落。这是第一个段落。
这是第一个段落。这是第一个段落。</p>span 标签
HTML <span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。
<p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p>br 换行标签
HTML <br> 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要
Mountain View, CA 94043-0801<br>hr 横线
HTML <hr> 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。
<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>
<hr>
<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>img
HTML <img> 元素将一份图像嵌入文档
src 属性是必须的，它包含了你想嵌入的图片的文件路径。
src="/media/cc0-images/grapefruit-slice-332-332.jpg"alt 属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。
alt="Grapefruit slice atop a pile of other slices">表格标签
表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值
<tr>
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
</tr>表单
HTML表单是与用户交互的强大工具。
from 标签
请求首部 中包含一个电子邮箱地址，这个电子邮箱地址属于发送请求的用户代理的实际掌控者的人类用户。
From: webmaster@example.orginput
input 事件也适用于启用了 contenteditable 的元素，以及开启了 designMode 的任意元素。在contenteditable 和 designMode 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素
<input placeholder="Enter some text" name="name"/>
<p id="values"></p>select-option
HTML元素 <option> 用于定义在 <select>, <optgroup> 或 <datalist> 元素中包含的项。<option> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项
<select id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>textarea
HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本
<textarea id="story" name="story"
rows="5" cols="33">
It was a dark and stormy night...
</textarea>
button
HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。 默认情况下，HTML按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮， 但你可以使用 CSS 来改变按钮的样貌。
<button name="button">Click me</button>元素
行内元素
特点：内容大小决定标签大小，在一行并排显示，注意：一般不要把行内元素和块级元素 行内元素中放，而且不能设定宽度和高度。
例：span a img input b/i/strong
块级元素
特点：独占一行，我们可以将行内元素和块级元素放入块级元素，注意：尽量不要尽量往p标签中添加，其他块级元素，可以设定宽度和高度。
例：p div h1-h5
行内块元素
特点：内容大小取决于它的内容，在一行并排显示，可以设定宽高。
练习题分享
接下来是这两天所学习的练习题，也与大家分享。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课程表</title>
</head>
<body>
<table border="1dp" cellpadding="20" cellspacing="5" bordercolor="blue">
<tr>
<td>项目</td>
<td colspan="5" align="center">上课</td>
<td colspan="2" align="center">休息</td>
</tr>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4" align="center">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4" align="center">休息日</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr>
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr>
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>英语</td>
<td>计算机</td>
</tr>
<tr>
<td rowspan="2" align="center">下午</td>
<td>政治</td>
<td>英语</td>
<td>体育</td>
<td>历史</td>
<td>地理</td>
<td>计算机</td>
<td rowspan="2" align="center">休息日</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表</title>
</head>
<body>
<h1>国内新闻</h1>
<p>案例说明：定义锚点，连接到锚点</p>
<hr color="hsdfsdk" size="5">
<li><a href="">俄驻华大使</a></li>
<li><a href="">县委书记</a></li>
<li><a href="">加勒比海</a></li>
<li><a href="">干部开会睡觉</a></li>
<h2>国外新闻</h2>
<hr color="hsdfsdk" size="5">
<li><a href="">恢复了独守空房的撒女</a></li>
<li><a href="">开机充电机市场</a></li>
<li><a href="">的hi分红i</a></li>
</body>
</html>效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background: url(bg.jpg) no-repeat;
background-size: 100%;
}
.logo{
display: inline-block;
width: 70px;
height: 70px;
}
h1 {
display: inline-block;
}
.box1 {
text-align: center;
}
</style>
<body>
<div class="box1">
<div>
<img src="logo.png" alt="logo" class="logo" > <h1>用户注册</h1>
</div>
<div class="box2">
用户名称<input type="text" placeholder="请输入你的用户名">
<br>
登录密码<input type="password" placeholder="请输入你的密码">
<br>
重复密码<input type="password" placeholder="请输入你的确认密码">
<br>
电子邮箱<input type="number" placeholder="请输入你的邮箱">
<br>
性别:<input type="radio" name="">男
<input type="radio" name="">女
<br>
职业<select>
<option value="">学生</option>
<option value="">老师</option>
<option value="">消防员</option>
<option value="">IT程序员</option>
</select>
<br>
爱好<textarea name="" id="" cols="30" rows="10">
书法
乐器
运动
编程
</textarea>
<br>
<input type="submit"> <input type="reset">
</div>
</div>
</body>
</html>效果如下：
感谢。（文章中关于各概念的介绍均来自mdn）
扫一扫
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
