Web应用基础HTML入门学习总结
HTML是一种超文本标记语言,用于定义网页的内容及结构,HTML运行在浏览器上,由浏览器解析
注:此处使用的开发软件是VS Code 默认浏览器为Chrome
1. HTML的元素
HTML文件由一个一个元素组成,元素之间可以嵌套。
元素由开始标签、结束标签和内容组成。
2. HTML文件的构成
<!-- -->
:这是注释符号。
<!DOCTYPE html>
:声明文档类型是HTML。
<html></html>
:<html>
元素,根元素。整个页面的内容都包裹在里面,其他元素都嵌套在这个元素中。
<head></head>
:<head>
元素内一般包含一些想在搜索结果中出现的关键字、页面描述、CSS样式、字符集声明等。
<body></body>
:<body>
元素里就是网页的所有内容。
举个例子:
<!--注释内容-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个Web页</h1>
<p>当前有点丑:)</p>
</body>
</html>
3. HTML的注释
<!-- -->
:HTML的注释符号,符号内的内容将不会出现在网页中。
4. HTML的元素属性
属性包含元素的额外信息。
属性的构成:属性名称+“属性值”
如:
<p title="这是一个title属性">鼠标移上来将会浮现一个小标签</p>
接下来将在介绍标签时介绍一些属性。
5. HTML的标签
HTML标记的作用是注明标题、文本、区块、图片等内容。
<meta>
:设置文档字符集编码方式。
如:
<!--网页的编码方式为utf-8-->
<meta charset="utf-8">
其中,charset
是一个用来规定文档字符编码的属性。
-
<link>
:引入其他文档或文件。引入网页图标:
<link rel="shortcut icon" href="picture.ico" type="image/x-icon">
其中,rel
属性用于描述目的地址(href
)跟源(站点)之间的关系;herf
属性规定了外部资源的地址;type
属性指定元素类型。
<title>
:设置页面标题。
<title>网页标签标题</title>
<p>
:文段(paragraph),这个标签用于包含一些想在网页中显示的文本内容。
<p title="这是一个段落">将鼠标移到这行文字上将会浮现一个小标签</p>
设置了title
属性的元素,当光标移动到其上时,信息提示框将显示title
属性的值,title
属性规定元素的额外信息。
<br>
:这个标签代表换行符,出现这个标签时,网页内容将另起一行。
这个标签没有结束标签
<p>换行<br>成功</p>
<hr>
:插入这个标签后网页会出现水平分割线。
<p>请输入:</p>
<hr>
<input>
<input>
:插入这个标签后,网页中将会出现输入框。
<input type="text">
<input type="password">
type
属性规定要显示的 <input>
元素的类型。
<img>
:这个标签用于插入图片。
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
alt
规定图像的替代文本。src
规定显示图像的 URL。width
规定图像的宽度。height
规定图像的高度。
<a>
:这个标签用于引入超链接。
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
href
的属性的值为要跳转去的地址 URL
target
属性值为_blank
表示在新的页面打开超链接,默认打开方式是在当前页面,即target="_self"
超链接标签包含的内容(当前为文字"百度一下")即为显示在页面上供用户点击的
<h1>
~<h6>
:表示HTML中从大到小六级标题。标题的文本内容可以作为关键字被搜索引擎检索到。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<table>
:表格标签。
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<tr>
表格的行标签。
<td>
表格行的单元标签。
<th>
表格的表头标签。
12. 列表标签:
<ul>
标签表示无序列表。无序列表使用<ul>
标签,默认使用实心圆点作为每项的标志,其它的标志可以是空心圆circle
,实心方块square
以及不出现标志。
<!--实心圆点作为每项的标志-->
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<!--方块作为每项的标志-->
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
标签表示有序列表。有序列表使用<ol>
标签,默认使用数字作为每项的标志,其它的标志可以是大写字母A
,小写字母a
,罗马字母i
等。
<!--数字作为每项的标志-->
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<!--小写字母作为每项的标志-->
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<form>
:表单标签。表单内录入的有效信息将提交到服务器。
当提交时,表单中没有name属性的元素将不会提交,比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。
<form>
<!-- 文本框,注意有 placeholder 提示符 -->
用户名:<br>
<input type="text" name="name" placeholder="请输入用户名"><br>
<!-- 密码框 -->
密码:<br>
<input type="password" name="ps" placeholder="请输入密码"><br>
年龄:<br>
<!-- 数字输入框,注意 min 和 value 属性-->
<input type="number" name="age" min="18" value="18"><br>
<!-- 单选按钮, 注意 checked 属性 -->
性别:<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
<!-- 下拉列表,注意 selected 属性 -->
党派:<br>
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>
<!-- 多选框 -->
您有哪些交通工具:<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
<!-- 日期选择器 -->
您的工作日期:<br>
<input type="date"><br>
<!-- 文件选择器 -->
上传您的照片:<br>
<input type="file" name="photo"><br>
<!-- 文本输入区域,注意 rows 和 cols 属性 -->
您的建议:<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- 表单提交/重置按钮,将表单中的数据取消或传输给服务器端进行处理 -->
<input type="submit" value="提 交">
<input type="reset" value="重 置">
</form>
<div>
:区块。区块内的内容会独立显示,不会与其他内容处于同一行。
<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>
<span>
:以内联的方式显示内容。标签内的所有内容将会尽可能地在一行内显示。
<h3>下面的元素将在一行中显示</h3>
<span>姓名:</span>
<input name="username">
<span>哈哈哈</span>
<pre>
:预设格式。用于展示一些特别格式的文本,标签中的内容将保持不变。
<pre>有多 远,滚 多远!</pre>
文本中出现的空格不会被自动忽略