2021-04-28

前端HTML（1）

一.什么是HTML？

HTML是用来描述网页的一种语言，它不是编程语言，而是一种标记语言——超文本标记语言。

二.HTML基础

1.<div> 可定义文档中的分区或节（division/section）。它是一个块级元素（即内容会自动的开始一个新行）

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。可以通过 <div> 的 class 或 id 应用额外的样式。

    <div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>

2.<a> 标签定义超链接，用于从一张页面链接到另一张页面。

   <a> 元素最重要的属性是 href 属性，它指示链接的目标

​
<a href="https://www.baidu.com/">百度</a>

​

3. <h1>~<h6>定义标题 ,其中h1>h2>h3>h4>h5>h6

    <h1>My First Heading</h1>
	<h2>My First Heading</h2>
	<h3>My First Heading</h3>
	<h4>My First Heading</h4>
	<h5>My First Heading</h5>
	<h6>My First Heading</h6>

4.<p>定义段落

<p>My first paragraph</p>

5.<button>定义按钮

<button type="button">按钮</button>

6.<img>元素向网页中嵌入一幅图像。

​
 <img src="../images/1.jpg" alt="图片">

​

7.<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、密码框、单选按钮、按钮等等。

    <input type="text" value="文本框">
	<input type="button" value="按钮">
	<input type="checkbox" value="复选框">
	<input type="password" value="密码框">
	<input type="radio" value="单选按钮">
	<input type="submit" value="提交按钮">
	 .....
	

8.<nav> 标签定义导航链接的部分。

  <nav>
	 <a href="">Home</a>
	 <a href="">About</a>
	 <a href="">contact</a> 
 </nav>

9.<b> 粗体文本。

10.<li> 标签定义列表项目,<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

​
<ol>
   <li>香蕉</li>
   <li>草莓</li>
   <li>芒果</li>
</ol>

<ul>
   <li>猕猴桃</li>
   <li>榴莲</li>
   <li>哈密瓜</li>
</ul>

​

11.select 元素可创建单选或多选菜单。

<select>
  <option value ="草莓">草莓</option>
  <option value ="芒果">芒果</option>
  <option value="橘子">橘子</option>
  <option value="榴莲">榴莲</option>
</select>

12.<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

 

表格：

<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

带标题的表格：
<table border="5">
<caption>标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

13.<span> 标签被用来组合文档中的行内元素。

<p><span>内容。</span>其他内容</p>

14.<hr> 水平线，水平分隔线 可以在视觉上将文档分隔成各个部分。

15.<br> 换行

16.option 元素定义下拉列表中的一个选项（一个条目）。

<select>
  <option>篮球</option>
  <option>滑雪</option>
  <option>跑步</option>
  <option>瑜伽</option>
</select>

 

以上就是我今天跟大家所分享的内容，希望能给大家带来帮助。新手初上道，若有不足请多多指教，谢谢！