HTML5基础入门课程笔记

试错小小○

已于 2022-08-28 15:39:47 修改

阅读量168

点赞数

文章标签： html5 前端 html 正则表达式

于 2022-08-28 15:38:12 首次发布

本文链接：https://blog.csdn.net/weixin_62068104/article/details/125625917

版权

文章目录

一、HTML5 （HBuilder软件）
二、表单标签
三、正则表达式（RegexTool工具）
四、正则破解
五、超链接标签和有序无序标签
六、表格标签
七、表格行与列合并
八、frameset(仅用于布局）
九、字体标签
十、table布局
总结

一、HTML5 （HBuilder软件）

web前端——1——>html4和html5常用标签——>表单标签，视频音频标签，超链接标签，有序无序标签，盒子模型
——2——>css和css3
——3——>JavaScript——>DOM,BOM
——4——>jQuery——>jQuery选择器和常用方法

超文本标记语言,弱语言，1989被研制出来
开发工具可以考虑 HBuilder
注释 Ctrl+shift+/ < !-- -->
< meta charset=‘‘utf-8’’ / >
水平分隔符线 < hr/>
< strong> 标签会使字体加粗，即使分两行写也不会换行
< em>斜体
标签可嵌套

二、表单标签

1.注释(ctrl+shift+/)

<!-- -->

2.弱语言（小错误不报错）

 <meta charset="utf-8" />

标题标签h1~h6，字体加粗，独占一行
水平分隔符(一条线）<hr / >
加粗标签< strong >不换行
斜体< em >
图片标签< img src=“摸头.gif”/ > 不换行
换行标签< br />
段落标签 < p > 换行且有间距
视频标签 < video src=“aaa.mp4” > 此时只有一个视频框而没有暂停播放音量，需添加属性来控制 controls=“controls”
音频标签 < audio src=“22.mp3”>
< marquee direction=“up">滚动的公告向上</ marquee >，down则向下
还可以添加width=“400px",height ,behavior=”slide“会使滚动最终禁止，scroll会使循环，alternate会使在范围内反弹

3.表单标签

input、select、textarea

<input />  
<input type="date"/>

出现一个文本框，
属性有 type取值可以
》date为年月日
》datetime-local为年月日时间
》text 为纯文本输入
》password 可以将密码隐藏

网页的空格可以用 &nbsp进行表示
》file 为文件上传
》radio为单选，点击即可选择，如果只能选一个则将两边增加 name属性，使两边name属性的值一样
》placeholder 属性为提示信息，则input框中有提示信息，如“请输入3位数字”

<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女

》按钮的值为button，还需要增加value属性及值显示内容
submit，reset

	注意：input的value值为默认，submit的value值显示在按钮上可跳转页面
	常用< form>标签套< input > 标签进行组合，type为reset表示重置

form标签的action属性可以设置值为跳转网页，method属性=“get”进行请求

method属性有两种请求（跳转到另一个地址，带参数的请求）
get请求：会将用户输入的数据直接显示在地址栏上
post请求：发送的数据以某种加密形式，不在地址上显示（敏感信息）

在input的name属性="a"时，跳转页面保存的key值为type属性的”text“文本等等同理
disabled=“disabled”表示禁用

<input type="button" value="登录">

中间标签 < center > < center/>
》checkbox 复选框
》color 选颜色

select表单标签，常用于组合标签，
在select中添加属性multiple=“multiple”

<select>
	<option>选项1</option>
	<option>选项2</option>
</select>

下拉选项的菜单
如果想刷新就默认选中，则在option那添加属性 selected=“selected”

textarea 为文本框标签（留言板）

文本域标签中，rows=“高度”，cols=‘宽度“，宽度高度填数字，固定高度宽度，超数则自适应出现滚动条

三、正则表达式（RegexTool工具）

将输入框的提示信息进行限制,比如字符为中文三个
在input标签中的pattern属性=正则表达式，required=“required”（会提示不能为空还有填写为符合要求的内容)
在input里面有邮箱类型type=“email”可以直接限制邮箱格式

四、正则破解

1在网页中可以右键选择“审查元素”，然后通过点击edit进行编辑，则可以改变元素的现在要求（如必须输入2位中文）----发生一次性破坏
2表单元素进行编号的只读状态则在< input>标签中增加属性readonly=“readonly”
3当form和input组合时，可以将input的内容提交过去，但是其他提交不了

	type="hidden" 表示不显示在网页的进行提交name和value（即展示给程序员看）

五、超链接标签和有序无序标签

提交和超链接都可以将网页跳转，但提交是按钮，超链接可以是文字。

<a  href="www"></a>    点击后会有不一样颜色，在原来网页位置打开  
href属性：存放URL地址
target属性 为值 "_blank" 时则会在点击a标签时重新打开新的窗口
           默认值为"_self" 时则在当前窗口打开

无序标签ul里面的li为小黑圆点
有序标签ol里面的li为顺序123…

快捷键
1、ul>li{中国}*3 然后按tab键则出现三次中国的无序

六、表格标签

每一个方格用一个td表示，tr表示一行，所有行构成一个table
即table表格里有多个tr行，每个tr行有多个td

初始table没有颜色，需要进行table里面的border属性设置颜色=“1px”  即线框的粗细
width属性进行宽度设定
小方格之间去掉间隙则用 cellspacing="0px" 
用< center> 将table标签整个包含，则可以进行 居中

表头可以用 < th > 标签，即将< td> 标签进行加粗居中

还有另一种表示方式，就是把表头放入< thead> 标签中作为头部，把下面每一行放入< tbody> 标签中，表示数据部分

在td标签中可以通过align属性=“center或left或right”进行居中，左，右对齐(同一属性属于就近原则）

七、表格行与列合并

cellpadding属性：指定单元格之间的填充距离（即内边距)

table>（tr>td*2)*3 表示三行两列的表格
在table后面加{}则表示添加内容，加[]则表示添加属性

左右两个td进行合并则,在第一个td里添加属性colspan=“2”,然后删去第二个td

将上下两行合并，则用属性rowspan=“2”写在第一行的td里，删去第二行对应的td

多个< br> 可以使得换行的间隙增加
input的type类型属性为CheckBox表示复选框，添加checked=“checked”进行默认选中

八、frameset(仅用于布局）

ol>(li>a[href=#]{潇洒走一回}）*6
指的是ol有序标签有6个li标签，每个标签有个a标签，href是属性，潇洒走一回是内容

frame标签不能独立存在，可拖动将屏幕分开，frame需放在frameset里面
横向切 rows=“20%,*” 分上下
纵向切 cols=“20%,*” 分左右
“先横后竖”进行划分

	<frameset>
	<frameset>    <frame />  </frameset> 包含关系
	<frame />有结束标记

如果需要加内容，需要单独写一个网页
然后把有内容的网页引入布局的网页

<frame src="dingbu.html"/>

&copy表示版权符号

九、字体标签

特殊符号

	空格 &nbsp;
	版权符号 &copy;
	小于号 &lt;
	大于号 &gt;
	如果输入3&lt;4则会在网页输出3<4

font标签
字体大小属性size，单位为px,可表示为 size=“60px”
字体颜色属性color，指令可以为单词、#244形式、

十、table布局

简写技巧
table【border=1】【cellspacing=0px]>(tr>td*3)*1
表示

<table border="1" cellspacing="0px">
	<tr> 行
		<td></td> 列
		<td></td>
		<td></td>
	</tr>

cellpadding可以调整table的内边距

总结