HTML5骨架+HTML基础
HTML5骨架实则是HTML文本的基本格式。
目录
HTML5骨架简介
HTML5骨架实则是HTML文本的基本格式
如何生成HTML5骨架
创建一个html格式的文件，使用Visual Studio Code打开，输入“!+table键”即可
HTML5骨架分析
HTML主要由开端文档声明和各种样式的标签组成，而标签有着开端也有着结尾.
实例分析：
<!DOCTYPE html> //文档类型声明（DTD)
<html lang="en"> //<html>标签开端，lang="en"意为language为english
<head> //<head>标签开端
<meta charset="UTF-8"> //UTF-8的编码形式
<meta name="viewport" content="width=device-width, initial-scale=1.0">
视口（Viewport）：视口是用户在浏览网页时可见的区域。这个meta标签有助于控制网页在不同设备和屏幕尺寸上的显示方式。
width=device-width：这个指令将视口宽度设置为设备的实际宽度，这意味着布局会根据不同的设备——无论是桌面电脑、平板还是手机——的屏幕大小进行适配。
initial-scale=1.0：这设置了页面首次加载时的初始缩放级别。值为1.0意味着初始时不进行缩放；页面将以1:1的比例渲染，即一个CSS像素对应一个实际物理像素。
<title>Document</title> //网页标题
</head> //</head>标签结束
<body> //<body>标签开端，body标签内即是网页正文内容
</body> //</body>标签结束
</html> //</html>标签结束
HTML基本语法（内容在body标签内）
HTML注释
<!-- 这是一个注释，不会显示在页面上 --> 后文的代码示例尽管复制，我已经注释过了
注释的作用是提高代码可读性，在网页中注释只会显现在网页源代码（鼠标右键查看）中
HTML基本标签
html对大小写不敏感，所以大小都可以
<h> 标题标签 //<h1>~<h6> 数字越小标题越大
实例:
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<!--标签内的内容被称为元素-->
<p> 段落标签(可自行分行，手动分行可用<br/>或者<br>标签（换行标签）)
实例：<p>这是一个段落。</p>
<p>这是一个段落。</p>
实例二：<hr>标签 <!--用于创建水平线-->
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<a> 标签用来定义链接
<a href="https://www.csdn.net/">这是一个链接</a>（点击有跳转效果）
<img> 标签定义图像
<img src="/image/1.jpg" width="258" height="39" /> <!--前面是图片地址，后面的指数调节图片宽高度-->
注：图片应跟本文件在同一目录下，不然不法显示，地址（/image/1.jpg）也要与图片目录对应
HTML属性
属性是 HTML 元素提供的附加信息。属性一般描述于开始标签，例如上述a标签的href属性
且一般情况下属性采用小写格式
常见属性列表：
属性 描述 class 为html元素定义一个或多个类名（classname）(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式（inline style） title 描述了元素的额外信息 (作为工具条使用)
有序无序列表标签
<ol><li>(有序标签) //其中的ol代表列表夹，li代表的是列表项
直接上实例：
<ol>
<li>第一个列表项
<li>第二个列表项<li> <!--每多一个<li>标签就多一行-->
<li>第三个列表项
<ul><li>(无序标签) //其中的ul代表列表夹，li代表的是列表项
上实例：
<ul>
<li>第一个列表项<li>第二个列表项<li>
<li>第三个列表项
HTML表格
直接上实例：
<table border="1"> <!--<table>标签定义表格，border属性则是边框属性，无此属性就无边框-->
<thead> <!--<thread>用来定义表格标题部分-->
<tr> <!--<tr>位于表格中来定义行-->
<th>列标题1</th> <!--<th>定义标题行中的数据-->
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody> <!--<tbody > 用于定义表格的主体部分-->
<tr>
<td>行1，列1</td> <!--<td>位于行中用来定义主体行中数据-->
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
<tr>
<td>行2，列1</td>
<td>行2，列2</td>
<td>行2，列3</td>
</tr>
</tbody>
</table>
不仅于此，还有以下属性，<table border="1" cellspacing="0">，使用方法以此为例
标签 描述 <caption> 定义表格标题 <colgroup> 定义表格列的组 <col> 定义用于表格列的属性 <tfoot> 定义表格的页脚
HTML表单
也是直接上实例
<form action="/" method="post">
<!--action属性为表单上传到的目标url，此处即为表单数据将会提交到当前网站的根目录下的某个默认或预设处理程序。例如，如果你在一个网站
www.example.com上有这样一个表单，提交表单实际上会将数据发送到www.example.com/这个URL上。-->
<!-- 下为文本输入框 -->
<label for="name">用户名:</label> <!--lable标签为input元素定义标记，其for 属性应当与相关元素的 id 属性相同-->
<input type="text" id="name" name="name" required> <!--text为说明要输入的是文本，required为必填的意思--><br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked> <!--radio输入方式为一个按钮选项，checked 属性规定在页面加载时应该被预先选定的 <input> 元素。-->
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" checked> <!--checkbox输入方式为一个方框选项-->
<label for="subscribe">订阅推送信息</label><br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country"> <!--select是选项，option是下拉列表中的一个元素-->
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select><br>
<!-- 提交按钮 -->
<input type="submit" value="提交"> <!--当然submit就是提交数据了-->
</form>
HTML布局常用标签div和span
实例：
<p>这是一个在 div 元素中的文本。</p>
</div><p>这是一些文本。</p>
<div style="color:blue">
<!--div标签定义 HTML 文档中的一个分隔区块或者一个区域部分，style是风格设计css的内容，不多扩展-->
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div><p>这是一些文本。</p>
结果为
span标签实例
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
<!--span标签定义行内部分且，只能添加行内元素的标签或文本，font-weight:bold意为加粗-->
div和span标签的区别
每个div标签都要另起一行；div标签内可以添加其他的标签元素（行内元素、块级元素都行）。
span标签是行内元素，会在一行显示；span标签内只能添加行内元素的标签或文本。
如有错误，还望指正......
欢迎加入北京社区
更多推荐
17
0- 0
已为社区贡献1条内容
所有评论(0)