HTML笔记

最新推荐文章于 2024-07-05 14:02:55 发布

Vkerei

最新推荐文章于 2024-07-05 14:02:55 发布

阅读量340

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_46517301/article/details/105795841

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、HTML概念

1.中文设置：
在浏览器上设置编码方式为GB2312/UTF-8
或者在html的最前面加上编码设置

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

2.HTML：Hyper Text Markup Language:超文本标记语言由一套标记标签组成，通常叫标签标签由开始标签和结束标签组成如： <p>为开始标签，</p>为结束标签，标签之间的文本叫做内容

标题标签：

<h1>大标题</h1>
<h2>小一点的标题</h2>
<h3>再小一点的标题</h3>
<h4>更小一点的标题</h4>

效果：

大标题

小一点的标题

再小一点的标题

更小一点的标题

3.元素：从开始标签到结束标签之间所有的代码一个完整的HTML文件，至少包含html元素，body元素，以及里面的内容

<html>
 <body>
   <h1>标题</h1>  
  </body>
</html>

特殊元素：没有内容如br/（换行）hr/（水平线）

<h1>标题1</h1>
<br/>
<br/>
<br/>
<h1>标题2前面有3个换行</h1>
<p>这是一个水平线，有渲染效果，但是没有文本内容</p>
<hr/>

标题1

标题2前面有3个换行

这是一个水平线，有渲染效果，但是没有文本内容

4.属性：用来修饰标签

比如要设置一个标题居中

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

居中标题

写在开始标签里的 align="center" 就叫属性

align 是属性名
center 是属性值
属性值应该使用双引号括起来

5.注释：使用 进行注释

二、基本元素

1.标题<h>：标题(head)会自动粗体并大写，且有换行效果
一般会使用<h1> 到 <h6> 分别表示不同大小的标题

2.段落<p>：段落(paragraph)自带换行效果

段落1段落2段落3
<p>段落4 </p> <p>段落5 </p> <p>段落6 </p>

段落1段落2段落3

段落4

段落5

段落6

3.粗体<b>或<strong>：粗体（bold）仅表示该文本为粗体，不暗示这段文字的重要性；strong更多强调语义上的加重，提醒用户该文本的重要性

4.斜体<i>或<em>：斜体（italic）仅表示该文本为斜体，不暗示这段文字的重要性；em(emphasized)更多强调语义上的加重，提醒用户该文本的重要性。常用于引入新术语。

5.嵌套：

<p>无效果</p>
<strong>粗体</strong>
<br/>
<i>斜体</i>
<br/>
<strong><i>同时有粗体和斜体</i></strong>

无效果

粗体
斜体
同时有粗体和斜体

6.预格式<pre>

<p>这里是没有用预格式的情况：</p>
 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>

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

public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World"); } }

使用预格式的情况:

public class HelloWorld {
     public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

7.删除<del>

<p>无删除效果</p>
<del>使用del标签实现的删除效果</del>

无删除效果

~~使用del标签实现的删除效果~~

8.下划线<ins>

<ins>使用ins标签实现的下划线效果</ins>
 <br/>

使用ins标签实现的下划线效果

9. 图像<img>：需要设置其属性src指定路径
① <img src="https:…网址>
②如果是本地文件，只需把图片放在同一个目录下即可。src直接使用文件名，不需要/
③图片在上级目录，则在src上加上 …/，即可访问上级目录的图片。如果是在上级目录的上级目录，则使用 …/…/
④src使用图片所在的绝对路径，并在前面加上file://
⑤如果图片不存在，默认会显示一个缺失图片，这是不美观的。所以可以加上alt属性。当图片存在的时候，alt是不会显示的；当图片不存在的时候，alt就会出现

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

10.超链接<a herf="跳转到的页面地址">超链显示文本</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
③使用图片作为超链接：超链显示文本处换为图片即可

11.表格<table>:行元素（table row）为<tr>，列元素（单元格元素）（table data）为<td>; 下图有3个tr元素，每个tr元素中有2个td元素

<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">

②设置表格宽度：设置table的属性width 如（px表示像素）

<table border="1" width="200px">

③设置单元格宽度（绝对值）：设置td的属性width 如

<tr>
      <td width="50px">1</td>
      <td>2</td>
  </tr>

3和a单元格自动继承1的宽度；2单元格的宽度由table宽度和1单元格宽度共同决定
④设置单元格宽度（相对值）：设置td的属性width为百分数即可（该列占table宽度的百分比）
⑤设置单元格水平对齐：设置td的属性align（left,center,right）
⑥设置单元格垂直对齐：设置td的属性valign（top,middle,bottom）
⑦横跨n列，水平合并：设置td的属性colspan=“n”
⑧横跨n列，垂直合并：设置td的属性rowspan=“n”
⑨设置背景色：设置tr（整行）或td（一个单元格）的属性bgcolor

12.无序列表<ul>和有序列表<ol>

<ul>
<li>OW</li>
<li>LOL</li>
</ul>

<ol>
<li>小锤</li>
<li>带锤</li>
</ol>

小锤
带锤

13.块元素<div>与内联元素<span>：

常见的块元素：h1,table,p
内联元素img,a,b,strong
div与span作用：

<div style="margin-left:100px" >
 <img src="https://how2j.cn/example.gif"/>
  <br/>
 <img src="https://how2j.cn/example.gif"/>
</div>

需要对两个图片进行左边距控制。如果不使用div,则需要对每一个图像设置边距，使用了div后，先把两个图像都放在一个div里，只需要设置div的边距，就可以达到两个图片都移动的效果。
14.字体<font>：常用属性有color和size（+为大号，-为小号）

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

绿色默认大小字体

蓝色大2号字体

红色小2号字体
颜色的两种表示方式：颜色名或颜色对应的16进制（如red与#ff0000均表示红色）

15.内联框架<iframe>：实现在网页中插入网页，相当于浏览器里有个小浏览器

<iframe src="https://www.baidu.com/" width="600px" height="400px">
</iframe>

三、表单元素

1.文本框<input type=“text”>：只能输入一行
不用写成<input/>或<input></input>这样
①设置长度：属性size<input type="text" size="10">
②设置初始值：属性value <input type="text" value="有初始值的文本框">
③设置背景文字：属性placeholder<input type="text" placeholder="请输入账号">

2.密码框<input type=“password”>：输入的数据自动显示为星号

3.表单<form>：用于向服务器提交数据，比如账号密码

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

在这里插入图片描述

action="…"表示把账号和密码提交到某个页面去
①method=“get”：常用的提交数据方式，若form元素没有提供method属性，则默认用get方式提交数据。通过超链接访问、在地址栏直接输入某个地址，均为get方式
特点：可以再浏览器的地址栏看到提交的参数，即使是密码
②method=“post”:不会在地址栏显示提交的参数。如果要提交二进制数据，比如上传文件，则必须用post方式

4.单选框<input type=“radio”>：默认均可同时选中

单选1 <input type="radio" >
单选2 <input type="radio" >

在这里插入图片描述
①默认选中：设定属性checked=“checked”
②分组：多个单选框都在一个分组里，则同一时间只能选中一个单选框。设置name属性相同即可

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

name为该分组的属性名，value为该分组的属性值，表示该分组被选中的选项

5.多选框<input type=“checkbox”>：分组内可以多选

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

其中OW被默认选中

6.下拉列表<select>：配合选项<option>使用

<select >
 <option >源氏</option>
 <option >带锤</option>
 <option >小美</option>
</select>

①设置高度：设置select的属性size
②设置多选：设置select的属性multiple="multiple"后，用ctrl或shift即可
③默认选中：设置option的属性selected=“selected”

7.文本域：<textarea>：可以有多行和滚动条

<textarea>abc
def
</textarea>

在这里插入图片描述

①设置宽度cols和行数rows

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

在这里插入图片描述

8.普通按钮<input type=“button”>

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

9.提交按钮<input type=“submit”>:用于提交form，把数据提交到服务端

10.重置按钮<input type=“reset”>:把输入框的改动复原

11.将图像作为按钮<input type=“image”>：并设置src属性

<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>

12.按钮标签<button></button>：按钮标签里的内容可以是文字也可以使图像。如果button的type=“submit”，它就具有提交form的功能
文字：

<button>按钮</button>

图像：

<button><img src="https://how2j.cn/example.gif"/></button>

type=“submit”：

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

Vkerei

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记

一、HTML概念1.中文设置：在浏览器上设置编码方式为GB2312/UTF-8或者在html的最前面加上编码设置<head><meta http-equiv="Content-Type" content="text/html; charset=GB2312"></head><p>中文</p>2.HTML：Hyper Te...
复制链接

扫一扫