HTML学习笔记

最新推荐文章于 2023-01-12 15:14:08 发布

Jason 20

最新推荐文章于 2023-01-12 15:14:08 发布

阅读量2.6k

点赞数 12

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

本文链接：https://blog.csdn.net/m0_48878393/article/details/112682412

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML

HTML:(Hyper Text Markup Language)超文本标记语言，由标签组成的语言，展示超文本效果
超文本：超越文本展示信息的功能范畴，可有图片，有样式的文字，点击跳转页面的文字

HTML代码由头和体组成，无须编译，用上到下依次解析执行
有开始和结束标签，之间的内容为内容体
没有内容体的标签称为空标签
不区分大小写，但便于阅读，建议小写
html标签属性，属性名=“属性值”
建议包裹嵌套，不建议交叉嵌套

<html>
	<head>头 
		<meta charset="UTF-8">
    	<title>html_demo</title>
    </head>
	<body>体 
		展示给用户看的信息内容</body>
</html>
<!--注释-->

HTML基本标签

字体标签font，用于修饰文字样式
属性：字号size(1-7)，颜色color，字体face
属性之间用空格隔开

<font size="1" color="red" face="">Hello</font>

换行标签br，浏览器解析html语言时自动忽略换行
空格 &nbsp可重复使用得到多个空格效果

<br/>
&nbsp

标题标签h1-h6，h1最大，划分标题

<h1>Topic</h1>

段落标签p，展示中划分段落，自动段前后空行
属性：对齐方式align，左对齐left，右right，中center

<p align="center">Hello</p>

图片标签img
属性：路径(必有)src，宽度width，高度height
可指定相对路径(推荐使用)或绝对路径，或互联网路径(http://)
宽度高度可设定为像素单位或者占父标签的百分比

<img src="../img/1.jpg" width="200px" height="50%"/>

列表标签ul，ol，li
ul用于展示无序列表，ol展示有序列表，li为列表内项目

<ul>
	<li>one</li>
	<li>two</li>
</ul>
<ol>
	<li>one</li>
	<li>two</li>
</ol>

超链接 标签a，可以跳转的链接
属性：href，跳转链接的路径，默认本页“#”，
href和标签内容都必须存在
内容体和链接都可以为html或图片

<a href="http://www.baidu.com">baidu</a>
<!--链接内容可为图片或其他html-->
<a href="xxx.html">
	<img src="../img/1.jpg">
</a>
<!--链接可为图片或其他html-->
<a href="../img/1.jpg">链接到图片</a>

表格标签table
table用于定义表格，tr为行，td为列，先定义行后定义列
th为表头，内容剧中且加粗，与td区别
属性：表格边框粗细border，宽度width

<!--三行两列表格，第一行为表头-->
<table border="1px" width="50%">
	<tr>
		<th>x</th>
		<th>y</th>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
</table>

单元格合并(td/th的属性，值为合并单元格数)
colspan：跨列合并
rowspan：跨行合并
注：被合并的单元要删掉

<!--三行四列表格，合并1，2；5，9；7，8，11，12-->
<table border="1px" width="50%">
    <tr>
        <td colspan="2">1</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="2">5</td>
        <td>6</td>
        <td colspan="2" rowspan="2">7</td>
    </tr>
    <tr>
        <td>10</td>
    </tr>
</table>

块标签span和div
span：行级块标签，一行上定义一个块(不自动分行)，用于少量数据展示
div：块级块标签，默认占满一行(自动分行)，用于大量数据展示

<div>div111</div>
<div>div222</div>
<span>span111</span>
<span>span222</span>

HTML表单标签

表单：用于提交用户数据

定义表单 form
属性：数据提交位置action(默认本页)，提交方式method
提交位置可为其他html或者互联网路径
提交方式默认get(提交内容显示到地址栏，信息不安全且内容有限)，可选post(内容隐藏，信息较安全，理论内容无限)

<form action="demo.html" method="get"> 
	添加表单内容
</form>

输入

input 可进行填写和选择

type 有属性输入框种类
name 分组(用于单选复选)，拥有name属性的项目才可提交位于地址栏显示
value 参数值，地址栏中显示
checked 默认选中，value为提交值

性别：<input type="radio" name="sex" value="man" checked="checked"/>男

readonly 内容只读，不可更改，可提交，value为显示内容

只读标签：<input type="text" name="x" readonly="readonly" value="readonly">

disabled 不可用，不可更改，不可提交

不可用：<input type="text" name="y" disabled="disabled" value="disabled">

地址栏参数列表：参数1=参数值1&参数2=参数值2，定义value后显示选中value，on表示选中，否则显示选中，即on，文本框设置value则为初始值

则一般设置选项时需要设置name和value，而文本框需要设置name

type的值可设置为

text 默认文本框(提示，显示内容需要在标签前或后添加)

用户名：<input type="text" name="username"/>

password 密码框，内容为非明文

密码：<input type="password" name="password"/>

radio 单选框，name分为同组实现单选效果

性别：<input type="radio" name="sex" value="man" checked="checked"/>男 
	  <input type="radio" name="sex" value="woman"/>女

checkbox 复选框

爱好：<input type="checkbox" name="hobby" value="music" checked="checked"/>音乐              
      <input type="checkbox" name="hobby" value="art"/>美术
      <input type="checkbox" name="hobby" value="photography"/>摄影

file 附件框可上传文件

照片：<input type="file" name="photo">

submit 提交按钮，value为按钮显示内容

<input type="submit" value="提交"/>

reset 重置按钮，恢复默认，value为按钮显示内容

<input type="reset" value="重置"/>

hidden 隐藏域，服务器需要获取，但不需要用户看到的数据，如ID

<input type="hidden" name="ID" value="123">

button 普通按钮，value为按钮显示内容

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

select 选择框
select定义选择框，option定义选项，默认显示第一个选项
属性：参数名name，多选提交multiple
option标签有属性参数值value，默认选中selected
注：给option标签设置内容便于用户理解，设置value值便于后台接收

选项：<select name="test">
        <option value="1" selected="selected">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
    </select>

textarea 文本域
可输入大量内容，可换行

简介：<textarea name="text"></textarea>

由上案例可得到
在这里插入图片描述
注：提交中文使用URL编码，将特殊符号和中文编码为%和十六进制数，避免出现解译歧义，保证表单数据传递时更好区分name和value

Jason 20

关注

12
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
8
评论
HTML学习笔记

HTMLHTML:(Hyper Text Markup Language)超文本标记语言，由标签组成的语言，展示超文本效果超文本：超越文本展示信息的功能范畴，可有图片，有样式的文字，点击跳转页面的文字HTML代码由头和体组成，无须编译，用上到下依次解析执行有开始和结束标签，之间的内容为内容体没有内容体的标签称为空标签不区分大小写，但便于阅读，建议小写html标签属性，属性名=“属性值”建议包裹嵌套，不建议交叉嵌套<html> <head>头</head&
复制链接

扫一扫