JavaWeb-HTML-CSDN博客

本文链接：https://blog.csdn.net/qq_43559559/article/details/102832259

html：（Hyper Text Markup Language）超越文本标记语言

html规则：
<标签>被标记的内容</标签>
font
index.html：首页
标准格式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>

html标签：
用来包裹整个html代码
所有的html代码必须写在html标签内
head标签：
写在html标签中 head中定义浏览器相关的配置
（横线上，就是写网站那一行）
title：定义文件标题
body标签：
定义内容体
font:字体标签

<标签名属性=“属性值” 属性=“属性值”></>
每一个标签都有自己的属性
font：修饰文本
color：改变文本颜色
size：改变文本大小
face：改变字体样式
ctrl+/：注释

<body>
		<!--<font color="hotpink">今天天气很nice鸭</font>-->
		<font size="1">nice</font>
		<font size="7">nice</font>
		<font color="aqua" size="1" face="楷体">程狗</font>
	</body>

< h1 >< /h1 >标题标签：
1-6个等级 h1-h6（从大到小）
b：让内容变粗
< br />换行：
HTML源码中换行，浏览器解析时会自动忽略。
< p > < /p >段落标签：
属性：align(对齐方式)
默认是left，内容居左；Right 右；Center 居中
** & nbsp; **
HTML源码中的多个空格，效果中最终会合并成一个。
这是空格符号，用于展示效果中显示一个空白的位置
< img/ >图片标签：
src：指明图片的路径。（必有属性）
width：图片宽度
height：图片的高度
（默认单位是px，像素，还有百分比设置）
图片路径的写法：
1. 内网路径：

绝对路径：
文件在硬盘上的具体位置。【不建议使用】
例如：C:\ JavaWeb001_html\img\c_1.jpg
相对路径：
从引入者所在目录出发。【建议使用相对路径】
例如：…/img/c_1.jpg
…/表示上一层目录
./表示当前目录

2. 互联网路径：
必须前面加上http://
例如：http://www.baidu.com/xxx.jpg

列表标签
无序列表：< ul >< /ul >
有序列表：< ol >< /ol >
列表条目项标签，用于在效果中定义一个列表的条目：< li >< /li >
超链接标签
用于在效果中定义一个可以点击跳转的链接：< a >< /a >
超链接正常工作：
①a标签中必须有内容
②a标签必须有href属性

<a href="http://www.baidu.com">百度一下，你就知道</a>

table:表格标签
tr：一行
内容写在列里面
td：一列
border：设置表格的边框粗细
width：设置表格的宽度
border=“1px” cellspacing=0px:列和列之间的边距 cellpadding：与边框的距离
合并行：rowspan
合并列：colspan

<table width="100%"  border="1px" cellspacing="0px" cellpadding="10px">
			<tr>
				<td>姓名</td>
				<td>总成绩</td>
				<td>排名</td>
			</tr>
			<tr>
				<td>小程</td>
				<td rowspan="2">59</td>
				<td>1</td>
			</tr>
			<tr>
				<td>小书</td>
				<td>2</td>				
			</tr>
			<tr>
				<td colspan="2">小燕</td>				
				<td>3</td>	
			</tr>
			</table>

块标签：
块级元素：无论如何都会占一行
div:不管多大都会占满一行（适用于大量数据展示）
span：内联元素：有多大用多大（适用于少量数据展示）
表单标签
< form>< /form>:表单
input：输入框，每一个input都应该有一个name
type=“”：类型
text=“”：文本类型
password:密码类型
radio：单选框
name：声明input是干嘛的 name=“sex“
checkbox：多选框
file：让用户上传文件
button：按钮 value：指的是input中的值
checked：指定单选和多选默认选中状态
readonly:只读状态
< input type=""/>< br />
action:提交到哪

<form action="#" method="post">
		用户注册<br />
		用户名<input type="text" name="username" readonly=""/><br />
		密码<input type="password" name="password"/><br />
		性别：男<input type="radio" checked="checked" name="sex"  value="男"/>
		女<input type="radio" name="sex"  value="女"/><br />
		爱好：篮球<input type="checkbox" name="hobby"/>
		足球<input type="checkbox" name="hobby"/>
		羽毛球<input type="checkbox" name="hobby"/><br />
		请上传身份：<input type="file" value="上传文件" name="file"/><br />
		<!--<input type="button" value="注册" name="zhuce"/>-->
		<textarea rows="8" cols="40"></textarea>
		<input type="submit" value="注册"/>
</form>

submit：提交
reset：重置
form提交方式：methon

默认是：get：数据全部拼接在网址后面不安全
post：数据封装在请求体中
url：网址(包括uri)
uri：网址直接指向了一个具体的资源
select：下拉框
option指定下拉框中的内容
multiple：多选/

<form action="#" >
			篮球<input type="checkbox" name="hobby" />
			足球<input type="checkbox" name="hobby" />
			羽毛球<input type="checkbox" name="hobby" />
			<input type="submit" value="提交"  />
			<select name="address" multiple="multiple">
				<option value="defalut">请选择</option>
				<option>湖南</option>
				<option>湖北</option>
			</select>
</form>