html学习

javaee开发
发布日期:   2021-12-24

入门

简单的示例

<font color="green">你好像是个憨批</font>
<font color="red">你好像是个憨批</font>
你好像是个憨批

运行

<html>
	<head>
		<title>我是标题</title>
	</head>
	<body>
		<font color="red">今天天气好晴朗</font>
	</body>
</html>

head之中存放的都是网页的说明性内容，例标题等。

2

基本标签

h系列 标题标签

<h1>一级标签</h1>
<h6>六级标签</h6>
<!--只有1-6级标签，设置h7会不识别，而当作普通文字进行解析-->

p

划分段落，自动在段前段后自动加空行

align段落的对齐方式，默认为居左

hr

分隔符标签，会在页面上显示一条分割线

size属性：水平分割线的高度

span标签

显示文本，不会单独占据一行

<span>span标签</span>

font

font-size用于设置字体大小，取值是像素

color用于设置字体的颜色

font-style设置字体样式取值为italic和normal

font-weight设置文字的粗细，常用取值lighter,bold和bolder还可以进行数字取值100，900

font-family设置字体，*”宋体”或者“微软雅黑”*

连写形式

font: italic bold 100px "楷体"

text-decoration文本装饰属性，常用取值underline(下划线) line-through(删除线) overline(上划线) **none(什么都没有)**可以用none去掉a标签的下划线

颜色

大小 1-7

字体

<body>
		今天天气怎么样：
    	<!--size属性：1~7，默认是3  color属性：可以是#xxxxxx表示三原色，也可以是red blue green等，如果红绿蓝两位取值相同，可省略成一位，例如#FF1133简化为#F13-->
		<font color="blue" size="6" face="楷体">
			今天好晴朗
		</font>
	</body>

br/

换行

b标签

粗体标签，不会独占一行

i标签

斜体标签，不会独占一行

空格符

&nbsp;

注释

<!--注释内容-->

图片标签

<img>

**src路径 **

​ 图片路径的写法：

​ 第一种内网路径，

​ 绝对路径，文件在硬盘上的具体位置一般不用

​ 相对路径，../img/001-1.jpg

​ ../表示上一层

​ ./表示本层

​ 第二种互联网路径 必须在前面加上https://

alt属性：图片无法显示的时候显示的文字

width height

可以是400也可以是百分比，百分比是父标签的百分比

width=”200” width=”50%”

title一般是给搜索引擎提供值的

<!--图片-->
		<img src="./img/001-1.jpg" width="200" height="200"/><br/>
		<img src="./img/001-2.jpg" width="50%" height="50%"/>
		<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21042G4331941H-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642915250&t=bf95b9745b8bf5cd6e5905306dd3014f" width="50%" height="50%"/>

列表标签

无序列表

type disc(实心圆)、circle(空心圆)、square(方块)、none(去掉)
<ul>
	<li>电脑数码</li>
	<li>电脑办公</li>
	<li>家具饰品</li>
</ul>

有序列表

是组合标签，ol标签内部嵌套li标签
type属性：取值范围，"A","a","I","i","l"
<ol>
	<li>电脑数码</li>
	<li>电脑办公</li>
	<li>家具饰品</li>
</ol>

image-20211224184927824

iframe标签

内联框架标签

iframe元素会创建一个包含另一个文档的内联框架（）

name属性：指定iframe的名称，如果 a 标签的中的 target 属性值是其 name 属性的时候,点击a标签,对应 的链接内容会出现在 iframe 中

src属性：指的是iframe中显示的内容的连接

frameborder属性：取值为0（不显示边框）和1（显示边框）

scrolling属性：取值为yes（可以滚动）no（不可以滚动）auto（自动）

width属性：宽度

height属性：高度

超链接标签

a

超链接标签连接的空间可以不经过对方允许，直接打开

防盗设置

超链接是无法直接访问的，当你访问该页面时，我会进行先行判断，先获取你的上一个链接地址，判断这上一个链接地址是不是从我当前的服务器内部发起的，如果是，可以正常访问；如果不是，给你一个指定的页面，项目首页。

href属性指定点击后跳转的路径（url)，如果需要点击之后没有反应西药写为：javascript:void(0)
target属性：指定跳转模式：_blank表示新建窗口，_self表示当前页，默认是_self，也可以在指定区域打开
<a href="https://www.baidu.com">百度</a>
<a href="列表标签.html">跳转到列表页</a>
<a href="demo03.html">
	<img src="../img/001-1.jpg">
</a>
<a href="../img/001-1.jpg">图片</a>
<a href="javascript:void(0)">点击之后没有反应</a>

表格标签

border:表格边框的宽度，

width:宽度；可以是像素也可以是百分比

height:高度；可以是像素也可以是百分比

align:水平对齐方式 常用left center right；都可以设置

valign:垂直对齐方式 常用 top middle bottom；valign可以设置tr td

cellspacing:外边距，单元格与单元格之间的距离，只能给table设置默认是2px

cellpadding:内边距，单元格内容与单元格之间的距离，只能给table设置默认是1px

bgcolor:背景颜色

<table border="15px" width="50%" height="500px" align="center" cellspacing="3px" cellpadding="6px" bgcolor="aqua">
    <caption><h1>这是标题</h1></caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>lyz</td>
        <td>男</td>
    </tr>
</table>
<table border="1px" width="100%">
    <tr>
        <td colspan="2">1</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="2">5</td>
        <td colspan="2" rowspan="2">6</td>
        <td>8</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
</table>

块标签

普通的标签，独自使用没有任何效果，主要用于网页中区域的划分，会单独占据一行

<div>
    适用于大量信息的展示
</div>
<span>适用于少量信息的展示</span><!--例如密码错误-->
<!--一个div在效果中默认占满一行-->
<div>
    我是div111111111111
</div>
<div>
    我是div222222222222
</div>
<!--span有多少东西，就占多少空间，不会自动换行-->
<span>我是span33333333333</span>
<span>我是span44444444444</span>

表单标签

一般用来提交用户数据，提交给服务器程序，相当于一个WEB程序的入口；

action属性表示请求的路径，表单提交到服务器的具体url,可以填写①服务器地址②文件地址

method属性表示请求方式一般取值是POST和GET，GET是默认值，提交的数据会追加到请求路径上../..servrvlet?username=userlyz&password=123,数据以这种格式进行提交多个数据用&进行连接。因为请求路径长度有限制，所以GET请求提交的数据有限，GET提交的数据会追加到路径上。

<form>
    用户id：<input type="hidden" value="123456"/><br/>
    用户名：<input type="text" name="username" id="" value="" /><br/>
    密&nbsp&nbsp&nbsp码：<input type="password" name="password" id="" value="123456" /><br/>
    性&nbsp&nbsp&nbsp别: <input type="radio" name="sex" value="nan" checked="checked"/>男
    <input type="radio" name="sex"value="nv"/>女
    <input type="radio" name="sex2"/>人
    <input type="radio" name="sex2"/>物<br/>
    <input type="submit" id="" name="" value="登录"/>
    <input type="reset" />
</form>
<form>
    爱好：<input type="checkbox" name="hobby" value="bi" checked="checked">编程
    <input type="checkbox" name="hobby" value="yu">羽毛球
    <input type="checkbox" name="hobby" value="la">篮球<br/>
    <input type="submit" value="提交爱好"/>
    照片：<input type="file"/><br/>
    <input type="button" value="按钮" /><!--需要配合js事件使用-->
</form>
<form>
    <button></button>
</form>

input标签

input的type属性值

readonly设置该标签值为只读标签，用户无法手动更改，数据可以正常提交
disabled:设置该标签不可用，参数值无法更改，参数值也无法提交

size：大小 用于设置文本框的大小

maxlength: 允许输入的最大长度，一般用于显示文本框中文本内容的长度

placeholder:占位符属性，用于设置文本框的占位符：提示信息

选项标签

select

name属性：发送到服务器的名称

multiple属性：不写默认单选，取值multiple表示多选，一般只使用单选

size属性：可见选项的数目

对于option标签，如果不屑value,默认提交option的文本内容，写了就提交value内容

选择框<br/>
<select name="test1">
    <option value="1">默认第一个</option>
    <option value="2">222</option>
    <option value="3">333</option>
</select><br>
<select name="city">
    <option value="1">111</option>
    <option value="2" selected="selected">设置为默认第二个</option>
    <option value="3">333</option>
</select><br>
<select name="hobby" multiple="multiple"><!--多选选项框-->
    <option value="1">111</option>
    <option value="2">设置为默认第二个</option>
    <option value="3">333</option>
</select><br>
<input type="submit" value="提交选择框"/>

textarea标签

文本域，用于多行输入文本

cols属性：文本域的列数

rows属性：文本域的行数

name属性：发送给服务器的名称

value属性：textarea的内容

表单文本域<br/>
个人简介:<textarea name="文本域">XXXXXXXX</textarea><br/>
<input type="submit" value="提交文本域"/>

button标签（不常用）

按钮标签，根据不同的type属性不同，功能会不同，完全可以使用input进行替代，所以一般不会使用button type属性可以有三个值 button submit reset;

button相当于input的button需要使用js进行事件绑定，submit相当于input的submit功能，reset相当于input的reset功能

from中有两个属性action method

action是将表单数据提交到那个页面

method是传输数据的方法get和post

Get将数据拼接到地址栏中，get相对不安全 ，get提交数据量有限

Post不会将数据拼接到地址栏将数据上传到请求体中 相对安全，理论上是无限的

尽量使用post方式提交表单

提交表单的注意事项

①需要提交服务器中的数据，必须都要放到form表单中，否则是提交不过去的

②最后的提交形式就是 name=value&name=value&name=value

③form中不需要的提交内容，不设置name属性，如果按钮本身就是作为提交功能的出发，那么就不需要设置name属性

使用url编码

主要解决的是中文和特殊符号，以防止数据读取会少的问题更好的区分name和value不至于将他们切割开

编码过程

1、进行普通编码【使用的是页面规定的字符集，例如 utf-8】

2、将字符数组中的每一个元素，都会从十进制，转换为十六进制

3、把已经转换为16进制的字节数组，以%进行拼接，拼接成字符串就是url编码后的结果

META 元—->属性

div

区域分割标签，普通的标签 独占一行，主要使用div标签进行区域划分；

demo

页面结构

<head> 头标签  语义化特征，存放一些控制元素  css样式、js脚本
<meta> 元标签 charset字符集   utf-8 还可以设置很多；
<title> 标题标签--->窗口标题
<body> 主体标签  躯干标签：存放的是页面中需要展示的内容
<footer>  脚步标签  ：一般都是备注、友情链接、备案号、等等一些

笔记

笔记1

子标签可以继承宽度值，不能直接继承高度值

但是有一些标签是例外例如 iframe需要父标签同时设置

笔记2

常用的响应状态码

常用状态码 意义
200 请求成功
302 重定向
304 读取本地缓存文件
404 请求的页面不存在
500 服务端程序出错
文章作者: 毛豆不逗比
文章链接: http://userlyz.github.io/2021/12/24/html-xue-xi-1/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 毛豆不逗比 !
javaee开发
赏
  目录
{% include '_third-party/exturl.swig' %} {% include '_third-party/bookmark.swig' %} {% include '_third-party/copy-code.swig' %} + {% include '_custom/custom.swig' %}