HTML基本知识和常用的标签

最新推荐文章于 2021-06-20 12:25:34 发布

程序dunk

最新推荐文章于 2021-06-20 12:25:34 发布

阅读量641

点赞数 8

分类专栏： Web前端+框架文章标签： html

本文链接：https://blog.csdn.net/qq_45796208/article/details/108530389

版权

Web前端+框架专栏收录该内容

11 篇文章 0 订阅

订阅专栏

系统结构

B/S架构

  Browser / Server      （浏览器/服务器的交互形式。）
  Browser支持哪些语言：HTML CSS JavaScript
  写HTML CSS JavaScript代码的这波人职位叫做：WEB前端开发工程师。（Java程序员目前来看也需要会一些前端的东西。）
  前端页面上的图片需要UI设计师完成。（PS对java程序员来说没有太高的要求。）
  S是服务器端Server，Server端的语言很多：C C++ Java python.....（我们主要是使用Java语言完成服务器端的开发）
  B/S架构的系统有什么优点和缺点？
      优点：升级方便，只升级服务器端代码即可。维护成本低。
      缺点：速度慢、体验不好、界面不炫酷
  
  企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统
  不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业
  内部更注重维护的成本。
  B/S架构的系统有哪些代表？
      京东
      百度
      天猫
      ....

C/S架构

**
Client / Server （客户端/服务器端的交互形式。）
缺点：升级麻烦，维护成本较高。
优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）
常见的C/S架构的系统：
QQ
微信
支付宝
…

HTML

什么是HTML

HTML: Hyper Text Markup Language （超文本标记语言）
由大量的标签组成，每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签属性名=“属性值” 属性名=“属性值”>
</标签>
</标签>
</标签>
超文本: 流媒体、图片、声音、视频…

怎么开发HTML

HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder…

怎么运行HTML

直接采用浏览器打开HTML文件就是运行。

HTML是谁制定的

W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5.
我们这里学习HTML4.0（主要是学习一下HTML的基础用法。）
W3C制定了很多规范：
HTML/XML/http协议/https协议…
为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
w3school:先出现的，和W3C没有关系
w3cschool：后出现的，和W3C没有关系

HTML语法

基本标签

段落标记：<p></p>

标题字：<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

换行：<br/>独目标记

水平线：<hr/>

预留格式：pre

粗体字：<b></b>

斜体字：<i></i>

插入字：<ins></ins>

删除字：<del></del>

右上角加字：<sup></sup>

右下角加字：<sub></sub>

font标签：<font size="3" color="red"></font>

实体符号

空格： 

大于号：>

小于号：&lt

表格

基本表格

<table border="像素" width="像素或百分比" height="像素或百分比" align="center">
    <tr align="center">
        <td>test</td>
        <td>test</td>
        <td>test</td>
    </tr>
    <tr>
        <td align="center">test</td>
        <td>test</td>
        <td>test</td>
    </tr>
    <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
    </tr>
</table>

行合并：rowspan
列合并：colspan

背景颜色和背景图片

bgcolor background

图片

（1）<img src="" width="" height="" alt="" title=""/>
（2）只设置图片的宽度，高度等比例缩放，不建议设置高度，设置高度容易失真。

超链接或热链接

（1）超链接的作用
向服务器发送请求，链接到某个资源
（2）链接到网络中的某个资源

<a href="http://www.baidu.com"></a>

（3）链接到本地的某个资源

<a href="本地文件的相对路径或绝对路径都可以"></a>

（4）图片做超链接

<a href=""><img/></a>

（5）超链接的target属性
_blank
_self
_parent
_top
（6）用户点击超链接和在浏览器地址栏上直接输入URL是完全相同的效果，只不过超链接更傻瓜式。

列表

有序列表

<ol type="1/A/a/I">
    <li>中国
        <ol>
            <li>北京</li>
            <li>天津</li>
            <li>上海</li>
        </ol>
    </li>
    <li>美国</li>
    <li>日本</li>

无序列表

<ul type="disc/circle/square">
    <li>中国
        <ul>
            <li>北京</li>
            <li>天津</li>
            <li>上海</li>
        </ul>
    </li>
    <li>美国</li>
    <li>日本</li>
</ul>

表单

用户名密码

（1）action属性等同于超链接的href属性，填写请求的url
（2）input标签属于输入域标签，input标签的type属性是text，表示文本框，是password，表示密码框
（3）input标签的type是submit表示提交按钮，该按钮可以提交表单，所谓表单的提交是发送请求url，并携带数据给服务器。
（4）所有按钮的value属性都是用来设置按钮上显示的文本内容
（5）发送请求并提交数据时，数据格式遵循HTTP协议，所有浏览器都会采用这种格式：url?name=value&name=value&name=value…，其中name是input标签的name属性，value是input标签的value属性
（6）文本框和密码框的value不需要开发人员指定，用户填写的数据就是value。
（7）submit按钮放到form标签外面无法提交表单
（8）普通按钮不具备提交表单的能力。
orm表单的method属性：

（1）method不写或写上get都属于get请求，method写post才是post请求
（2）get请求在HTTP协议的请求行上提交数据，最终提交的数据会显示在浏览器地址栏上
（3）post请求在HTTP协议的请求体中提交数据，最终提交的数据不会显示到浏览器地址栏上
（4）只有当使用form表单，并且method属性设置为post才是post请求，其他请求均为get，超链接也是get请求。

下拉列表怎么显示多个条目，怎么支持多选

（1）支持多选：multiple=“multiple”
（2）显示多个条目：size="3

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册的表单</title>
	</head>
	<body>
		<!--
			用户注册：
				用户名
				密码
				确认密码
				性别
				兴趣爱好
				学历
				简介
		-->
		<br><br><br><br><br><br><br><br>
		
		<!--
			form表单method属性
				get：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏。
				post：采用post方法提交的时候，用户提交的信息不会显示在浏览器的地址栏上。
			
			method属性不指定，或者指定get，这种情况下都是get
			只有当method指定为post的时候，才是post请求。
		-->
		<!--超链接是get请求，不是post请求-->
		<a href="http://localhost:8080/oa/save?uername=abc&password=121">提交</a>
		<form action="http://192.168.0.1:8080/jd/save" method="post">
			<table align="center" >
				<thead>
					<tr align="center">
						<td colspan="2">
							<h1>用户注册</h1>
						</td>
					</tr>
				</thead>
				<tbody>
					<tr align="center">
						<td>用户名</td>
						<td><input type="text" name=username></td>
					</tr>
					<tr align="center">
						<td>密码</td>
						<td><input type="password" name=userpwd></td>
					</tr>
					<tr align="center">
						<td>确认密码</td>
						<td><input type="password" ></td>
					</tr>
					<tr align="center">
						<td>性别</td>
						<td>
							<input type="radio" name="usersex" value=1 checked>男
							<input type="radio" name="usersex" value=2>女
						</td>
						
					</tr>
					<tr align="center">
						<td>兴趣爱好</td>
						<td>
							<input type="checkbox" name="interest" value="smoke" checked>抽烟
							<input type="checkbox" name="interest" value="drink">喝酒
							<input type="checkbox" name="interest" value="firehead">烫头
						</td>
					</tr>
					<tr align="center">
						<td>学历</td>
						<td>
							<select name="grade">
								<option value="high">高中</option>
								<option value="dz">大专</option>
								<option value="bk" selected>本科</option>
								<option value="ss">硕士</option>
							</select>
						</td>
					</tr>
					<tr align="center">
						<td>简介</td>
						<!--文本域没有value属性-->
						<td><textarea rows="10" cols="60" name="introduce"></textarea></td>
					</tr>
					<tr align="center">
						<td colspan="2">
							<input type="submit" value="注册">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="reset" value="清空">
						</td>
					</tr>
				</tbody>
				
			</table>
		</form>
	</body>
</html>

file控件

（1）文件上传时使用
（2）

hidden控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file控件</title>
	</head>
	<body>
		<!--file控件：文件上传使用-->
		<input type="file">
		
		<form action="http://localhost:8080/oa/save" >
			<!--隐藏域：网页上看不到，但是表单提交的时候会自动提交到服务器-->
			<input type="hidden" name="userid" value="1111">
			用户代码<input type="text" name="usercode">
			
			<input type="submit" value="提交">
		</form>
	</body>
</html>

readonly与disabled

（1）readonly：只读，不能修改，提交表单时数据会提交
（2）disabled：只读，不能修改，提交表单时数据不会提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>readonly disabled</title>
	</head>
	<body>
		<!--
			readonly和disabled相同点：都是只读不能修改。
			但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）。
		-->
		<form action="http://localhost:8080/taobao/save">
			用户代码<input type="text" name="usercode" value="111" readonly>
			<br>
			用户姓名<input type="text" name="username" value="zhangsan" disabled>
			<br>
			<input type="submit" value="提交">
		</form>
	</body>
</html>

在这里插入图片描述

input控件的maxlength

maxlength 属性规定输入字段的最大长度，以字符个数计。

HTML中元素的id属性和class属性

1、在HTML当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识，所以在同一个HTML文档当中，id值不能重复。
2、表单提交数据的时候，只和name有关系，和id无关
3、id有什么用?
JavaScript语言：可以对HTML文档中的任意节点进行增删改操作。
id的存在让我们获取元素（节点）更方便
4、HTML文档是一棵树，树上有很多节点，每一个节点有自己唯一的id

讲述HTML文档是一棵树（DOM树），树上有很多节点，每个节点一般都会有id属性，id属性具有唯一性，在同一个文档中不能重复，id是该节点的唯一标识。后期所学的javascript语言可以对DOM树上的节点进行增删改，达到动态效果。javascript主要通过节点的id来获取该元素。

div和span属性

理解div是一种图层，div主要使用在网页布局方面，通过后期所学的CSS可以设置div的宽度、高度、位置等样式。div比table的布局更加灵活。

1、div和span是什么？有什么用？
div和span都可以成为“图层”。
*图层的作用是为了保证页面可以灵活的布局。
*div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
3、div和span的区别？
div默认独占一行（默认情况下）
span不会独占一行

程序dunk

关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
HTML基本知识和常用的标签

这里写自定义目录标题欢迎使用Markdown编辑器系统结构B/S架构C/S架构HTML什么是HTML怎么开发HTML怎么运行HTMLHTML是谁制定的HTML语法基本标签实体符号表格背景颜色和背景图片图片超链接或热链接列表**表单**file控件hidden控件readonly与disabledinput控件的maxlengthHTML中元素的id属性和class属性div和span属性欢迎使用Markdown编辑器提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录欢迎使用Ma
复制链接

扫一扫