web前端之HTML_web前端html-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39033957/article/details/94484678

Web前端之HTML

HTML

HTML

什么是HTML？

HTML是htyper text markup language 即超文本标记语言
文本可以是一个一个word文档，一个txt文件，也可以是一个html文件
而超文本可以是视频、音频、超链接等等。

HTML的编写工具

Sublime、Webstorm等等

HTML的基本框架

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标题</title>
</head>
<body>
	
</body>
</html>

ps：HTML特殊符号对照表

HTML的常用标签

h1~h6 ：标题标签，展示网页中的标题
p ：段落标签
strong/em：加粗/斜体
hr/br：段落间的分割线/文本间的换行
ul/ol/dl：无序列表/有序列表/定义列表
li/dd：是无序和有序列表/定义列表间各个内容的分隔
dt：definition description是定义列表中内容的描述

<ul><li>内容</li></ul>
<ol><li>内容</li></ol>
<dt>快捷键们</dt> <!--definition description-->
<dl><dd>内容</dd></dl>

div/span：
div 可定义文档中的分区或节（division/section）。是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。（class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素）

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

span 被用来组合文档中的行内元素。可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。

<p class="tip"><span>提示：</span>... ... ...</p>
9. table：制作表格的标签
caption：表格标题

栗子：

<!-- border是边框  cellspacing单元格距离-->
	<table border="3" cellspacing="0">
		<caption>商品清单</caption>
		<!-- tr是指table road行 -->
		<tr>
			<!-- th=table head表头 -->
			<th>产品名称</th>
			<!-- 横向合并colospan，合并的是列数 -->
			<th colspan='2'>数量和入库时间</th>
		</tr>
		<tr>
			<!-- table data 表中数据-->
			<td>电视机</td>
			<!-- 纵向合并rowspan，合并的是行数 -->
			<td rowspan='3'>小米</td>
			<td>2000</td>
			<td>2019-03-01</td>
		</tr>
	</table>

a：anchor,锚点。超链接标签
注意：a标签有一个伪类选择器，a标签想要设置颜色，必须作用到a标签上，继承关系达不到。
title：当鼠标箭头移动到a中内容上时所显示的文字
target：目标。_blank 在新窗口中打开。_self 默认。在相同的框架中打开。 _parent 在父框架集中打开。_top 在整个窗口中打开。framename 在指定的框架中打开。
id：要使标签在当前页面上跳转则使用id=“top”,注意在一个页面中id是唯一的

<!-- 在一个页面中id是唯一的 -->
	<p id="top"></p>
	<a href="http://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a>
	<p>啦啦啦啦啦啦</p>
	......
	<a href="#top">回到顶部</a>
<a href="mailto：2416962843@qq.com">如有问题，请联系我们</a>

img：为网页添加图片

<!-- 相对路径是:./1.png(当前）,../1.png（上一级）
		绝对路径:E:\HTMLcode\images\2.png
	 -->
	 <!-- alt是当图片加载失败时的提示 -->
     格式：尖括号 img src="./1.png" alt="碓冰拓海" title="我的鲇沢呢" width="480" 尖括号

form：标识了这是一个表单。表单是用户和服务器数据交互的用户界面，一切向服务器提交的数据都是由其中的几个简单的标签组成的。
action：标识了所有的数据内容将向引号内的地址提交。
method：标识为提交到网站的方法（一般为 GET 或 POST ）。
input：标识为一个输入框。
type：标识为文本输入（user 是其参数的名字）。
input 的 type 为 submit：标识一个按钮的类型为“提交”类型。
option：下拉框
select：可创建单选或多选菜单。<select&> 元素中的 <option> 标签用于定义列表中的可用选项。
label：如下两列代码所示。for=“username” 对应input中id=“username”,表示当鼠标停留在“用户名：”上时，右边的输入框会高亮显示，起到提示作用。

<label for="username">用户名：</label>
<input type="text" placeholder="请输入用户名" id="username">

<form action="http://www.baidu.com" method="get">
		<p>
			<label for="username">用户名：</label>
			<input type="text" placeholder="请输入用户名" id="username">
		</p>
		<p>
			<label for="pwd">密码：</label>
			<input type="password" placeholder="请输入密码" id="pwd">
		</p>
		<!-- radio是单选框 -->
		<p>
			<!-- checked=checked代表默认选这个 -->
			男：<input type="radio" name="sex">
			女：<input type="radio" name="sex">
		</p>
		<h4>你所需要购买的课程</h4>
		<!-- checkbox是复选框 -->
		<p>
			web前端：<input type="checkbox" checked="checked">
			Javascript：<input type="checkbox">
			python:<input type="checkbox">
		</p>
		<h4>下拉框实现单选</h4>
		<p>
			<select name="" id="">
				<option selected="selected">HTML</option>
				<option value="">CSS</option>
				<option value="">Vue</option>
			</select>
		</p>
		<h4>下拉框实现多选</h4>
		<p>
			<!-- mutiple表示多选 -->
			<select multiple="multiple">
				<option selected="selected">HTML</option>
				<option value="">CSS</option>
				<option value="">Vue</option>
				<option value="">C</option>
				<option value="">Java</option>
			</select>
		</p>
		<h4>个人描述：</h4>
		<!-- 文本框多行输入使用textarea，可以拖动放大缩小 rows:行数 cols:列数-->
		<p>
			<textarea name="" id="" cols="30" rows="10"></textarea>
		</p>
		<p>
			<input type="submit" value="注册">
			<input type="reset" value="重置">
		</p>
	</form>

以上代码网页运行图：
13. input：用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

简单文本输入框 <input type="text" placeholder="请输入用户名" id="username">
密码输入框 <input type="password" placeholder="请输入密码" id="pwd">
单选框 男：<input type="radio" name="sex">
复选框 <input type="checkbox" checked="checked">
 <input type="submit" value="注册">
按下重置框 <input type="reset" value="重置">