第一天、HTML
一、HTML
1html的简述
超文本标记语言(Hyper Text Markup Language),HTML不是一种编程语言,而是一种标记语言
超文本 : 页面中可以包含特殊字符、图片、音乐、视频。。。
标记 : 页面展示效果由标签将其包括起来。
2、网站页面信息展示:
标题标签: 从h1到h6如<h1></h1>~<h6></h6>
特点:会改变字体大小;会自动换行。
水平线标签:<hr />
属性有:
color:水平线颜色
size:水平线的粗细
width:水平线的长度;有两种表示方式:像素/百分比
字体标签:<font>
color:字体颜色
size:字体大小
字体格式化:粗体:b
斜体:i
换行标签:<hr/>
空格标签: ;
段落标签:<p>
align:对其方式center、left、right、top
2.网站图片展示:
图片标签:<img />
src :指定图片路径;相对路径,绝对路径。
alt:指定图片不存在用文字代替。
width:指定图片的宽度。
height:指定图片的高度。
3.网站列表展示:
列表标签:分为有序 ol 和无序ul
type
子标签:li
超链接:<a>
href:指定要跳转的路径。
分为:外网路径和内网路径。
外网路径 :例如百度"http://www.baidu.com,谷歌,
内网路径:自己的路径 例如Demo.html.
target:指定要跳转的页面。默认_self本页面跳
_blank新开一个页面;_self在本页面跳转。
target可以和frame中的name结合使用,可以跳转到name所在的空间
4.网站表格展示
标签:<table>
<tr>行标签
<th>列标题
<td>列标签
<option>表格标题
属性:
cellpadding:文字与边框的距离
cellspacing:单元格之间的距离
colspan:跨列合并
rowspan:跨行合并
bgcolor:背景颜色
background:背景图片。
5.网站后台页面展示:
框架标签:<frameset>不能和<body>共存
按行切割:rows
按列切割:cols
子标签:<frame />
属性:src引入页面的路径
name结合a标签的target使用
6.表单:<form>
作用:接收用户输入的数据,然后将数据提交到服务器。
form的两个属性:
action:将表单数据提交到何处。
method:提交的方式,有好多种,暂时先说两种get和post
get和post的区别:
1、提交的方式不一样
get:数据在地址栏,post:数据在请求体
2、安全性不同
get将内容暴露在地址栏 相对不安全,post 相对比较安全。
3、提交的数据量不同
get 提交的数据量是有限的
post 提交的数据量是无上限
input输入项标签:标签用于获得用户输入信息,type属性值不同,会成为不同 的组件,最常用的标签
属性:type:定义表单输入项input的组件类型
name:组件名。参数名
value:组件默认值。参数值用户名、
密码、手机号.... 咱们可以通过输入框手动输入,value值就是咱们输入的值
单选框/复选框:value值只能选不能输入,所以必须给其设置一个value
checked:设置单选框、复选框的默认选中状态 如 checked=“checked”。
input-type属性值说明:
属性值 |
说明 |
text |
文本框,单行的输入字段,用户可在其中输入纯文本。 默认值 |
password |
密码框。 内容非明文 |
radio
|
单选框。
必须再设置name属性,并且name属性的值必须相同 |
checkbox |
复选框。 必须再设置name属性,并且name属性的值必须相同 |
submit |
提交按钮。用于控制表单提交数据。
|
reset
|
重置按钮。 用于将所有的 表单输入项恢复到 默认状态 |
file
|
附件框。用于文件上传。 |
hidden
|
隐藏域。
用户id、商品id |
button
|
普通按钮
后面结合js、jq 使用 |
date |
定义日期字段 |
number |
定义数字字段 |
|
定义email地址字段 |
Image |
定义图片作为按钮 提交表单数据 |
Color |
取色器 |
输入项标签:<select>
<select>定义一个下拉列表,可以进行单选或多选。
select属性:
name:组件名。提交的参数名
multiple:设置该标签选项全部显示,并且可以进行多选提交。
<option>定义一个下拉列表的列表项,就是select的子标签。
option的属性:
value:设置需要提交的参数值。如果不设置value,默认提交的是option的内容,如果设置 value,提交的就是value的值
selected:设置某个列表默认选中
表单输入项标签:<textarea>
文本域标签,可支持用户输入并提交大量纯文字数据。
textarea属性:
name:组件名。
cols:设置文本域列的字符个数
rows:设置文本域行数。
7.标签span和div
HTML标签<span>
<span>行级的标签,用于在效果中 一行上定义一个块,进行内容显示。
① span有多少内容,就会占用多大空间。
②Span不会自动换行
HTML标签<div>
<div>块级的标签,用于在效果中 定义一块,默认占满一行,进行内容的显示
① 默认占满一行
② 会自动换行
总结:
感觉html主要就是记忆标签,无逻辑感。上面内容全是一些常用标签。共同努力!!!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步