HTML标签&&认识浏览器
HTML标签&&认识Chrome
- 前言
- 一、HTML标签
-
- 1.HTML声明及基本框架：
- 2.基本标签
-
- (1)标题标签：
- (2)title标签：一个霸气的标题往往非常重要
- (3)段落标签&&换行标签
- (4)文本格式化标签
- (5) 超链接标签(也可以称做锚标签)
- (6)图像标签
- (7)表格标签
- (8)列表
- (9) form表单域的input表单元素
- 二、浏览器
前言
转眼，一周已经过去了。这周的预习blog是关于HTML标签以及对Chrome浏览器的浅显认识。
毕竟是刚刚接触前端的萌新，如有错误，还请读者朋友们斧正。
一、HTML标签
1.HTML声明及基本框架：
如图，如果看过我的第一篇blog的话，应该是和我一样直接在修改过文件名的后缀(即将默认的.txt 格式修改为.html格式，当然html大小写不限)后，只需要输入英文半角的！即可自动构建HTML的基本框架。
解析：由HTML5的语法规定，第一句声明了该文件的文件格式–HTML类文件。与最后一句：< /html >形成了一个完整的闭环。
< html lang=“en”>该标签意味着该html文件的主要文字表达方式，即该网页是英文网页，现在具有越清晰的网站语言定义更加有利于网站收录。
其次，一个HTML文件总共分为两个部分：
(1)< head >: 标签用于定义文档的头部，它是所有头部元素的容器。
- 导入一些需要链接的其他文件，例如CSS文件，JS文件等。
- 导入一些必须的设置:必须包含文档的标题（title），meta信息等。
(2)< body >:html 与 body标签是不同的块级元素，是父子关系，主要负责与用户的直接沟通。
2.基本标签
(1)标题标签：
代码的实现如下！
<h1>这是一级标题h1>
<h2>这是二级标题h2>
<h3>这是三级标题h3>
<h4>这是四级标题h4>
<h5>这是五级标题h5>
<h6>这是六级标题h6>
这个就是以上代码的效果图。
在介绍完如何在如何写出标题后。我想先补充一下网页最上方的门面：title标签。
(2)title标签：一个霸气的标题往往非常重要
首先，我们要了解该标签应该在哪里书写。该标签位于< head >标签内
<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>
如图。
(3)段落标签&&换行标签
<p>
当现实折过来严丝合缝地贴在我们长期的梦想上时，它盖住了梦想，与它混为一体，如同两个同样的图形重迭起来合而为一一样。(《追忆似水年华》)
p>
<p>
当现实折过来严丝合缝地贴在我们长期的梦想上时，它盖住了梦想，<br />与它混为一体，如同两个同样的图形重迭起来合而为一一样。(《追忆似水年华》)
p>
三个注意事项：
- < p >被p标签包裹的文字就是独立的一个段落，段落内部不换行
- < br />是换行标签(其实< br >也可以起到相同的作用，在换行标签方面，语法上的要求并不是特别严格)
- 每个闭合的< p >< /p >标签是换行的。
(4)文本格式化标签
<strong>这是加粗文字strong>
<br>
<b>也是加粗的文字，看看有没有区别b>
<br>
<em>这是着重的文字em>
<i>这是斜体文字i>
<small>这是小号字small>
<sub>这是下标字sub>
<sup>这是上标字sup>
<p>你好<ins>插入字ins>啊p>
<p>这是原来的句子p>
<p>这是<del>原来的del>句子p>
可以结合我的源码对这些标签进行理解。
(5) 超链接标签(也可以称做锚标签)
<a href="url">Link texta>
该标签会以" Link text "出现在网页中。
开始和结束标签之间的文字被作为超级链接来显示,但是不会保留原有的网页。
添加target属性的超链接标签
<a href="url" target="_blank">name that you will showa>
该标签会以" name that you will show "出现在网页中。
点击该超链接将会跳转到 url 所描述的网页，同时保留原有的网页。
(6)图像标签
只要按照这个格式来输入，就不会有问题了。
但是要注意的是img 标签是行内元素，不会自动换行。
(7)表格标签
<html lang="en">
<link rel="stylesheet" href="bor.css">
<head>
head>
<body>
<table id="t1" align="center">
<tr class="A">
<th colspan="2">My familyth>
tr>
<tr class="B">
<td>Persontd>
<td>Agetd>
tr>
<tr>
<td>mothertd>
<td>47 years oldtd>
tr>
<tr>
<td>fathertd>
<td>50 years oldtd>
tr>
<tr>
<td>metd>
<td>20 years oldtd>
tr>
table>
body>
html>
效果图如下：
CSS格式就省略不写了，但是内容是没有变化的。
< th >表头，< tr >表中一行，< td >表示一个单元格内的内容。
(8)列表
<ul>
<li>这是无序的列表li>
<li>这是无序的列表li>
<li>这是无序的列表li>
ul>
<ol>
<li>这是有序的列表li>
<li>这是有序的列表li>
<li>这是有序的列表li>
ol>
格式就如上表。请大家结合代码格式输入。
(9) form表单域的input表单元素
email属性必须填写邮箱
url属性必须填写网址
date属性必须选择日期，否则显示错误
<form>
<li>邮箱：<input type="email">li>
<li>日期：<input type="date">li>
如图所示。
二、浏览器
由于这周主要以google chrome 为主要浏览器，所以我先说一些简单的知识点。
如 F12 查看该网页源代码。
以及查看控制台
点击console键来查看。