首页 > 其他分享 >HTML学习笔记1

HTML学习笔记1

时间:2023-02-13 11:01:51浏览次数:38  
标签:表格 标记 笔记 表单 学习 HTML 提交 跳转 描述


1.2 单标记和双标记
1.单标记:空标记,就是没有结束标记的称之为单标记。
语法:水平线标记:​​​<hr />​​​ 换行标记:​​<br />​​​ 2.双标记:体标,就是这个标记有开始和结束
语法:​​<font>​​和​​</font>​​ 1.3.文本控制和文本样式标记
1.段落标记​​<p></p>​​和换行标记​​<br />​​ 段落标记:段落与段落之间会自动换行
2.文本样式标记​​<font>​​内容​​</font>​​ 常用的属性: face用来描述字体的样式
Size用来描述字体的大小,最大取值为7
Color用来描述字体的颜色,取值三种形式:
*用英文单词来表示:red,green,blue
*使用十六进制的数据表示:#ff0000
*使用RGB三原色表示:RGB(255,255,0)
3.其他标记
标题标记:​​<h1></h1>,<h2></h2>----------<h6></h6>​​ 字体样式标记:字体加粗​​<b></b>​​字体倾斜​​<i></i>​​字体下划线​​<u></u>​​ 4.图像标记:
1.图像标记:在网页上引入图片
语法:​​<img src=”图像的url”/>​​ 常用的属性:src用来引入图片
width用来描述图片的宽度
height用来描述图片的高度
border用来描述图片的边框
注意:图片的路径分为绝对路径和相对路径(同级目录,上级目录,下级目录)
注释标记:<!—图像标记–>,注释标记的内容不回显示在网页上面
****html描述网页的语言,并不是很严谨的语言,html标记通过被浏览器解析,展示特定的效果。
5.表格标记:
1.表格的作用:将数据更加有条理的显示出来;用来规划网页
2.语法:

<table>
<tr>
<td>单元格的内容</td>
</tr>
</table>
tr:表示行(常用的属性 align 描述表格内的内容显示位置)
td:表示单元格
th:表示单元格,文字自动居中,加粗
常用的属性:
border:给表格添加边框。
width:描述表格的宽度。
align:描述表格的位置
cellspacing:描述表格的厚度
cellpadding:描述文字与边框的距离
合并操作:
  1. 要确定表格有多少行和多少列。 合并行:rowspan
    ,合并单元格:colspan
    2.要确定合并的是行还是列。

6.表单标记
表单简介:吧用户输入的数据提交到服务器端,简单来说,表单用来让用户输入数据,表单把数据封装起来提交到指定的位置。
表单组成:
>>>表单控件:用户输入数据,比如说输入用户名,输入密码。
>>>提示信息:告诉用户输入框要输入什么值,
>>>表单域:标识表单的开始和结束,语法 提示信息:表单控件

  1. 创建表单
比如:<form action="demo1.html" method="post" name="登陆表单">
用户名:<input type="text" name="username" /><br/>
密码: <input type="password" name="psw" /><br/>
<input type="submit" value="提交" />
</form>

常用的属性:action表示表单要提交的位置。
method:表单提交的方式,常用的有get和post提交,默认提交方式是 get提交
get提交:数据会显示在浏览器的地址栏,不安全,提交的数据大小是有限制的
post提交:数据不回显示在地址栏,是安全的,提交的数据大小没有限制
2. 表单控件:​​​<input />​​​ 输入框控件的属性type:
文本框:text
密码框:password
单选按钮:radio
复选按钮:checkbox
上传按钮:file
提交按钮:submit
重置按钮:reset
注意:表单想要把数据提交到指定的位置,输入框必须要有name属性。
3. 文本域标记:​​<textarea rows=”文本域的行数” cols=”文本域每行输入的字符数”></textarea>​​ 比如:
评论:​​<br/>​

<form method="get" action="demo1.html">
<!--注意:表单想要把数据提交到指定的位置,输入框必须要有name属性。-->
<textarea rows="5" clos="50" name="pinglun">输入评论,请注意文明用语</textarea><br/>
<input type="submit" value="提交评论" />
</form>

1.7列表标记和超链接标记
1.列表标记:有序列表标记、无需列表标记、自定义列表标记
无序列表:

<ul>
<li>列表项内容1</li>
<li>列表项内容2</li>
<li>列表项内容3</li>
</ul>
属性:type 默认值disc,  square,circle

2.超链接标记:可以实现跳转的效果
语法:​​​<a href=”跳转的url” target=”目标窗口的弹出方式”>文本或者图片</a>​​​ Target:_self 在原有的窗口打开网页
_blank 打开一个新的窗口显示要跳转的网页
比如:

<a href="demo1.html" target="_self">自己站内跳转到demo1之self的效果</a><br/>
<a href="demo1.html" target="_blank">自己站内跳转到demo1之blank的效果</a><br/>

href属性:跳转的url 1.站内跳转 2.站外跳转
1.8

标记
Div:通常是用来实现网页布局


标签:表格,标记,笔记,表单,学习,HTML,提交,跳转,描述
From: https://blog.51cto.com/u_15961549/6053743

相关文章

  • 《告别圆舞曲》——读书笔记
    2023.2.9①对秩序的渴望是一种正当的借口,藉此,人对人的仇恨就堂而皇之地掩盖了人地罪孽2023.2.10①人一老,就喜欢吹嘘自己往日里受过的苦,把它们变成一个博物馆,并邀请人......
  • 【HMS Core】机器学习服务助力APP快速集成图像分割与上传功能
    ​1、介绍总览机器学习服务(MLKit)提供机器学习套件,为开发者使用机器学习能力开发各类应用,提供优质体验。得益于华为长期技术积累,MLKit为开发者提供简单易用、服务多样......
  • Spring boot 学习笔记:第十章--实现AcApp端
    开启最后一章的学习java-jarmatchingsystem.jar启动jar包ctrl+shift+r浏览器强制刷新重新打包的流程app.vue删去div.windows标签。style加上scoped属......
  • 联想笔记本充电周期达到300问题解决。
       1.发现联想笔记本电源低于45W就会损耗电池周期;高于45W时电池则直接用充电器电,右下角的叹号也会消失。2.笔记本默认电源就只有45W。如果用了type-c扩展坞,走PD......
  • 读Java实战(第二版)笔记08_默认方法
    1. 兼容性1.1. 二进制级的兼容性1.1.1. 只要不重新编译该类,即使不实现新的方法,现有类的实现依旧可以运行1.1.2. 现有的二进制执行文件能无缝持续链接(包括验证、准......
  • java学习
    Markdown学习一级标题:#+空格+标题名字二级标题:##+空格+加标题名字三级标题:###+空格+加标题名字四级标题####+空格+加标题名字五六级标题以此类推字体Holle,wor......
  • DVWA渗透测试笔记 low篇
    DVWA配置项目地址:https://github.com/digininja/DVWA.gitclone到服务器目录下即可将DVWA目录拷贝到Kali的Apache服务器目录/var/www/html下,启动Apache和mysql服务。ser......
  • 【博学谷学习记录】超强总结,用心分享 | vue面试1
    vuex的原理是什么?它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。每一个Vuex应用的核心就是store,里面又包括:(1)sta......
  • 【译】使用 ML.NET 进行机器学习 - 集群完整指南
    原文|NikolaM.Zivkovic翻译|郑子铭在之前的几篇文章中,我们探索了一些基本的机器学习算法。到目前为止,我们介绍了一些简单的回归算法,分类算法。我们使用ML.NET实......
  • c语言函数的学习记录
    1、C语言中的函数包括库函数和自定义函数两种,其中库函数有2个较好的学习网站:​​www.cplusplus.com​​​​http://en.cppreference.com​​(有中文版,但建议看英文原版)2、自......