HTML的一些常用操作

最新推荐文章于 2022-09-20 22:07:55 发布

salmon1802

最新推荐文章于 2022-09-20 22:07:55 发布

阅读量582

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/Salmon1122/article/details/108632322

版权

笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

***~~自己写着玩的，可能比较乱~~ ***

一

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>

这样就能告诉浏览器使用GB2312方式显示中文
如果 GB2312不行，就用UTF-8

二.

<h1 align="center">居中标题</h1>

居中标题是元素
写在开始标签里的 align=“center” 就叫属性
align 是属性名
center 是属性值
属性值应该使用双引号括起来

三.
html使用 进行注释

四.
标题会自动粗体，大写其中的内容，并且带有换行效果
一般会使用<h1> 到 <h6> 分别表示不同大小的标题
h1最大然后依次递减

五.
<p>标签即表示段落是paragraph的缩写自带换行效果，
不使用<p>是无法自动换行的

六.
<i>和<em>都可以表示斜体效果
i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性

em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。常常用于引入新的术语的时候使用。

七.
预格式<pre>

这里是没有用预格式的情况：

public class HelloWorld {
 
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
 
<br/>
<br/>
 
<p>使用预格式的情况:</p>
 
<pre>
public class HelloWorld {
 
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
 
</pre>

在这里插入图片描述

八.

<br/>相当于换行
<hr/>分界线
知乎老哥最爱用这个了！

九.
<del>即删除标签，delete的缩写
在这里插入图片描述

十.**
<ins>即下划线标签
<u>使用u标签实现的下划线效果，但是不建议使用

十一.
<img> 即图像标签,需要设置其属性 src指定图像的路径

如果想使用图片所在的绝对路径，需要在前面加上file://

<img src="file:\\C:\Users\salmon\OneDrive\Desktop\example.gif"/>
下面也可以：是不区分\和/的
<img src="file:\\C:\Users\salmon\OneDrive\Desktop\example.gif"\>
<img src="file://C:/Users/salmon/OneDrive/Desktop/example.gif"/>

如果只是使用相对路径则如下：

使用某网页上的图片：
<img src="https://how2j.cn/example.gif"/>
本地图片且在同一个目录下则：
<img src="example.gif"/>
如果图片在上级目录，则在src上加上 ../，即可访问上级目录的图片
如果是在上级目录的上级目录，则使用 ../../ 
<img src="../example.gif"/>

十二.
可以设定图片大小和位置

<img width="200" height="200" src="example.gif"/>

<div align="left">
  <img src="https://how2j.cn/example.gif"/>
</div>
 
<div align="center">
  <img src="https://how2j.cn/example.gif"/>
</div>
 
<div align="right">
  <img src="https://how2j.cn/example.gif"/>
</div>

在这里插入图片描述

十三.
如果图片不存在，默认会显示一个缺失图片，这是不友好的
所以可以加上alt属性。
当图片存在的时候，alt是不会显示的
当图片不存在的时候，alt就会出现

<img src="https://how2j.cn/example_not_exist.gif" />
 
<br/>
 
<img src="https://how2j.cn/example.gif" alt="这个是一个图片" />
 
<br/>
<img src="https://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />

在这里插入图片描述

十四.

<a>标签即用来显示超链

完整元素是

<a href="跳转到的页面地址">超链显示文本</a>

例如：

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

结果如下：12306

新增属性target

<a href="http://www.12306.cn" target="_blank">http://www.12306.cn</a>

结果如下：http://www.12306.cn

title=：当鼠标放在超链上的时候，就会弹出提示文字

<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>

结果如下：www.12306.com

使用图片作为超链

<a href="http://www.12306.com">
<img src="https://how2j.cn/example.gif"/>
</a>

十五.
表格：tr(table row)表示行，td(table data)表示列

<table>
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

效果：
1 2
3 4
a b

带框的表格：设置table的属性border

<table border="1">
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

在这里插入图片描述

设置table的属性 width
px即像素的意思。
比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素

<table border="1" width="200px">
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

在这里插入图片描述
设置td的属性width
在示例里，1单元格设置了宽度，那么3，和a单元格，自动继承该宽度
2单元格的宽度由table宽度和1单元格的宽度决定

<table border="1" width="200px">
  <tr>
      <td width="50px">1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>
双击选中所有代码

在这里插入图片描述
设置td的属性width为百分数（占table设置的width的百分之多少）

<table border="1" width="200px">
  <tr>
      <td width="80%">1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

在这里插入图片描述
设置td的属性align （横向对齐）

<table border="1" width="200px">
  <tr>
      <td width="50%" align="left">1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td align="center">3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td align="right">a</td>
      <td>b</td>
  </tr>
 
</table>

在这里插入图片描述 设置td的属性valign （纵向对齐）

<table border="1" width="200px">
  <tr>
      <td width="50%" valign="top" >1</td>
      <td>
             2   <br/>
             2   <br/>
             2   <br/>
      </td>
  </tr>
  
  <tr>
      <td valign="middle"  >3</td>
      <td>
             4   <br/>
             4   <br/>
             4   <br/>
      </td>
  </tr>
  
  <tr>
      <td valign="bottom" >a</td>
      <td>
             b   <br/>
             b   <br/>
             b   <br/>
      </td>
  </tr>
  
</table>

在这里插入图片描述
设置td的属性colspan（列合并）

<table border="1" width="200px">
  <tr>
      <td colspan="2" >1，2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

在这里插入图片描述
设置td的属性rowspan （行合并）

<table border="1" width="200px">
  <tr>
      <td rowspan="2">1,3</td> 
      <!-- 如果想合并多行或者多列，把2改为你想要的行列数就行
      比如这里就是，合并第一行以及第一行之后的一行，共两行-->
      <td>2</td>
  </tr>
 
  <tr>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

在这里插入图片描述
设置tr或者td的属性bgcolor （背景色）

<table border="1" width="200px">
  <tr bgcolor="gray">
      <td width="50%">1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td  bgcolor="pink">b</td>
  </tr>
 
</table>

在这里插入图片描述

十六.
列表分无序列表和有序列表
分别用

标签和
1. 标签表示

十七.

<div>

<span>

这两种标签都是布局用的
这种标签本身没有任何显示效果
通常是用来结合css进行页面布局

div是块元素，即自动换行
常见的块元素还有h1,table,p
span是内联元素，即不会换行
常见的内联元素还有img,a,b,strong

十八.
使用<font>标签表示字体

<font color="green">绿色默认大小字体</font>
<br>
<font color="blue" size="+2">蓝色大2号字体</font>
<br>
<font color="red" size="-2">红色小2号字体</font>

绿色默认大小字体

蓝色大2号字体

红色小2号字体

<font color="red" >用red表示红色字体</font>
<!-- 或者颜色对应的16进制-->
<font color="#ff0000" >用#ff0000表示红色字体</font>

十九.
<iframe> 即内联框架

通过内联框架可以实现在网页中“插入”网页

<iframe src="https://blog.csdn.net/Salmon1122/article/details/108632322" width="600px" height="400px">
</iframe>

二十.
<input type="text"> 即表示文本框

并且只能够输入一行

如果要输入多行

使用文本域<textarea>
注： <input> 标签很特别，一般是不需要写成<input />或者<input></input> 这样的。
并且<input> 这样的写法也是满足标准的

<input type="text">
<input type="password"> 
type还可以是password类型，这样输入的字符会以*形式展示。
<input type="text" size="10"> 设置文本框的长度 
<input type="text" value="有初始值的文本框">
<input type="text" placeholder="请输入账号">  有背景文字的文本框

在这里插入图片描述

注：使用属性placeholder
placeholder是一个html5的属性，对于大多数的已经支持html5的浏览器来说，是可以看到效果的，但是对于老的不支持html5的浏览器，比如ie8，就看不到效果

二十一.
<form>用于向服务器提交数据，比如账号密码

<form action="https://how2j.cn/study/login.jsp">
<!--action="/study/login.jsp" 表示把账号和密码提交到login.jsp这个页面去-->
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

<form method="get" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

<form method="post" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

get和post的区别:
get
是form默认的提交方式
如果通过一个超链访问某个地址，是get方式
如果在地址栏直接输入某个地址，是get方式
提交数据会在浏览器显示出来
在这里插入图片描述

不可以用于提交二进制数据，比如上传文件

post
必须在form上通过 method=“post” 显示指定
提交数据不会在浏览器显示出来
可以用于提交二进制数据，比如上传文件

注：Submit 对象
Submit 对象代表 HTML 表单中的一个提交按钮 (submit button)。
在 HTML 表单中 <input type=“submit”> 标签每出现一次，一个 Submit 对象就会被创建。

资料来自于 https://www.runoob.com/jsref/dom-obj-submit.html

二十二.
<input type="radio" > 表示单选框
在这里插入图片描述 ----------------------------------------------------------------------------------------

分组即，多个单选框，都在一个分组里，同一时间，只能选中一个单选框设置name属性相同即可 ,

其中name是用来标识这个单选框的，用于识别这一块，后面处理数剧时，就是靠name来找它。name 和 value 可以理解成，变量名和变量值，例如 a=10；

value是表单用来提交数据的，在后面页面处理时，要获取前面页面提交过来的内容，用的是request name属性，得到的值就是他的value

<p>今天晚上做什么？</p>
 
学习java<input type="radio" name="activity" value="学习java" > <br/>
东京热<input type="radio" checked="checked"  name="activity" value="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity"  value="lol"> <br/>

在这里插入图片描述

二十三.
<input type="checkbox"> 即表示复选框

<p>今天晚上做什么？</p>
  
学习java<input type="checkbox" value="学习java" > <br/>
东京热<input type="checkbox" checked="checked"  name="activity" value="tokyohot" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>

即上面的选项变为可多选

二十四.
<select> 即下拉列表，需要配合<option>使用

<select >
 <option >苍老师</option>
 <option >高树玛利亚</option>
 <option >遥美</option>
</select>

在这里插入图片描述

<select  size="2">
 <option >苍老师</option>
 <option >高树玛利亚</option>
 <option >遥美</option>
</select>

在这里插入图片描述

<select size="3" multiple="multiple">
 <option >苍老师</option>
 <option >高树玛利亚</option>
 <option >遥美</option>
</select>

在这里插入图片描述

二十五.
<textarea> 即文本域
与文本框不同的是，文本域可以有多行，并且可以有滚动条

<textarea>abc
def
</textarea>

<textarea cols="30" rows="8">123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea>

二十六.

<input type="button" value="一个按钮">

普通按钮不具备提交form的效果
submit:特殊的button，会自动将表单的数据提交
button:普通的按钮，不会自动提交表单数据

二十七.
<input type="submit"> 即为提交按钮
用于提交form，把数据提交到服务端

<form action="/study/login.jsp" method="get">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

二十八.
<input type="reset"> 重置按钮可以把输入框的改动复原

<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

重置会使账号和密码全部清空

二十九.
<input type="image" > 即使用图像作为按钮进行form的提交

<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="image" src="https://how2j.cn/example.gif">
</form>

三十.
<button></button>即按钮标签
与<input type="button">不同的是，<button>标签功能更为丰富

按钮标签里的内容可以是文字也可以是图像

如果button的type=“submit” ，那么它就具备提交form的功能

<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
 
<button type="submit">登陆</button>
 
</form>

so---------------------

<button type="submit">登陆</button>
<input type = "submit" value = "登陆">
这两个效果是一样的！

salmon1802

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录