html基础语法-CSDN博客

本文链接：https://blog.csdn.net/alan_zhang226/article/details/128720748

html的介绍

本菜鸡总结了一下本周学习的web前端三大核心技术中的html部分，文章包含html的定义，基础骨架，文字标签的用法和实操案例，不足之处希望大佬指正！

html的定义

html指的是超文本标记（标签，元素）语言（Hyper Text Markup Language）。

html的骨架标签

骨架标签是html的最基本组成，如下图所示：

<html>
<head>
	<title> My cool project title </title>
</head>
<body>
</body>
</html>

新建html文件的时候会生成这些骨架标签：

html 标签我们称它为根标签，html标签是网页中最大的标签
meta 标签来设置网页的字符集，其中默认是utf-8 中文字符集
title 标签标签设置网页的标题
body 标签设置网页的主体内容部分

常用的html 标签

标题标签

从 <h1>到 <h6>分为6级，呈现依次减小的效果，每个标签都独占一行

// 下面列出了从第一级标签到第四级标签
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

布局标签

布局标签没有语义，仅仅用于页面的布局，在页面中较为常见。

div: 俗称大盒子，独占一行
span：俗称小盒子，一行可以放置多个

html段落

通常我们用 <p>标签来定义，如果<p>标签用的合理，即语义化很成功，可以在搜索引擎处于靠前的位置。

<p>我是第一段</p>
<p>我是第二段</p>

img标签

<img>标签用于插入图片，例如:

<img src=”...” width=”...” height=”...” title=”...” alt=”...” />

其中

src 代表资源，它后面的值应该写想要加载的那张图片的名字。
width代表宽度（横向距离）， width代表高度（纵向距离），值得注意的是如果你只设置宽或者高，你未设置的那个值它会按照原图的比例进行缩放。
title 表示鼠标悬停时显示的文字。
alt 有两种含义，（1）当图片为能正常加载到时候，alt里的文字会被看到。（2）网页阅读器读取此内容给视障用户听，增强用户体验。

html文字标签

form标签

form表单标签里面就是所有用户填写的表单数据；表单可以包含许多不同类型的表单元素，比如：输入框，单选框，复选框，提交按钮等等。所有的表单元素都必须要放到一个form标签里面。

<form action="xxx.jsp"  method="post" >
</form>

其中，
action=“xxx.jsp” 把表单数据提交给哪一个后台程序去处理
method=“post” 传递数据时候的方式方法，post代表隐式提交数据；get明文传送数据

input 标签

input标签包含多种 type类型，通过设定不同的类型值我们可以实现输入框，单选框，复选框按钮等等，代码如下

输入框，我主要介绍文本输入框和密码输入框两种，其中文本输入框用来处理单行输入，密码输入框相比文本输入框可以对输入的内容做掩码处理，比如说显示为星号。代码如下所示。
```
用户名：<input type="text" placeholder="请输入用户名" />
<br />
密码框：<input type="password">
<br />
```

单选框, 如果我们想要设置默认选中状态我们可以设置checked=“checked”

<input type="radio" name="xb" id="nan" checked="checked" />
<label for="nan">男</label>
	
<input type="radio" name="xb" id="nv" />
<label for="nv">女</label>

复选框

你的爱好：
<input type="checkbox" id="cs" checked="checked" />
<label for="cs">测试</label>

<input type="checkbox" id="cf" />
<label for="cf">吃饭</label>

<input type="checkbox" id="sj" />
<label for="sj">吃饭 </label>

<input type="checkbox" id="ddd" checked="checked" />
<label for="ddd">打豆豆</label>

<br />

按钮, 通过设置type="buttton" 我们可以实现不同的按钮，注意这些按钮需要js配合才能实现其他功能。

<!-- 需要js配合才能实现其他功能 -->
普通按钮：<input type="button" value="按钮" />
<br />
<!-- 点击后让表单里面的数据恢复默认值 -->
重置按钮：<input type="reset" value="我是重置" />
<br />
<!-- 点击后可以让表单提交给指定的后台处理 -->
提交按钮：<input type="submit" value = "我是提交"/>

下拉框

类似的我们用<select>定义下拉列表，<option>表示下拉列表的选项, 如果我们想让其中的一个选项作为默认的元素，我们需要添加<selected>属性。

来自：
<select>
	<option>北京</option>
	<option>上海</option>
	<option>广州</option>
	<option selected="selected">深圳</option>	
</select>

文本域

这里你可以定义这个文本域的行数<rows>和列数<cols>

意见：<textarea name=" id=" cols="30" rows="10"></textarea>

案例

通过上面介绍的内容，我们可以实现一个简单的收集信息的表单，如下图所示。
在这里插入图片描述
源代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			form 表单标签里面就是用户所有填写的数据
			
			action 把表单数据给给某个后台程序去处理
			
			method="post" post表示隐式传递
		 -->
		<form action="xxx.py" method="get">
			用户名：<input type="text" placeholder="请输入用户名" />
			<br />
			密码框：<input type="password">
			<br />
			性别：
			<!-- 让男是选中状态 -->
			<input type="radio" name="xb" id="nan" checked="checked" />
			<label for="nan">男</label>
			
			<input type="radio" name="xb" id="nv" />
			<label for="nv">女</label>
			
			<br />
			
			你的爱好：
			<input type="checkbox" id="cs" checked="checked" />
			<label for="cs">测试</label>
			
			<input type="checkbox" id="cf" />
			<label for="cf">吃饭</label>
			
			<input type="checkbox" id="sj" />
			<label for="sj">吃饭 </label>
			
			<input type="checkbox" id="ddd" checked="checked" />
			<label for="ddd">打豆豆</label>
			
			<br />
			来自：
			<select>
				<option>北京</option>
				<option>上海</option>
				<option>广州</option>
				<option selected="selected">深圳</option>	
			</select>
			
			<br />
			<!-- 
				textarea 文本域
				测试细节：
				1. 要测试三大主流的浏览器
				2. 文本右下脚拖拽按钮要禁用
			-->
			<!-- 下面这行代码暂时不用记住 -->
			<style type="text/css">
				textarea{resize: none;}
			</style>
			意见：<textarea name=" id=" cols="30" rows="10"></textarea>
			
			<br />
			<!-- 需要js配合才能实现其他功能 -->
			普通按钮：<input type="button" value="按钮" />
			<br />
			<!-- 点击后让表单里面的数据恢复默认值 -->
			重置按钮：<input type="reset" value="我是重置" />
			<br />
			<!-- 点击后可以让表单提交给指定的后台处理 -->
			提交按钮：<input type="submit" value = "我是提交"/>
		</form>
	</body>
</html>