HTML基础

最新推荐文章于 2024-08-24 17:09:25 发布

黄彦祺

最新推荐文章于 2024-08-24 17:09:25 发布

阅读量378

点赞数 11

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_63893831/article/details/135206318

版权

本文详细介绍了HTML的基本结构，包括头部和主体元素，以及常用的标签如标题、段落、链接等。还涵盖了前端开发工具WebStorm和VSCode的使用，以及CSS的基础知识，包括样式表的三种应用方式、优先级和基本选择器。此外，表单元素和其属性也被逐一介绍。

摘要由CSDN通过智能技术生成

1.HTML基本结构

2.前端开发工具

Webstrom、vsCode、HBuilder X

破解: 修改电脑时间 2034-10-25
双击: webstrom.exe 直接安装
安装结束后：把时间调整回来

3.HTML基本标签

标题标签: hx(1-6)
段落标签: p
加粗： strong
斜体: em
删除线:del
上下标: sup ,sub
分割线: hr
换行标签: br
超链接标签: a
-href: 打开的链接
-target: _self(本) _black(新)
内联框架: iframe
图片标签:img
-src:图片路径
-width:宽度
-height：高度
-title:标题
-alt:图片无法加载时文字内容
视频: video
音频：audio

列表标签
1.无序 ul->li
2.有序 ol->li
3.自定义 dl->dt->dd

表格标签：
1. table : 表格标签
2. tr: 行标签
3. td: 单元格
4. th: 表头
5. caption: 表格标题

属性：
border:边框
cellspacing:单元格外边距
cellpadding:单元格内边距
bgcolor:表格背景
rowspan：行合并
colspan: 列合并

-表单
1.表单标签
<form action="" method="">
</form>
注意
-action: 指定数据提交的服务器
-method: GET|POST
*GET: 不安全 , 效率高 , 数据长度不能超过3KB.
*POST: 安全 , 效率低 , 数据长度理论上无限制
作用：把数据以指定的方式提交给指定的服务器。

2.输入标签
<input type="" name="" value=""/>
type: 输入控件类型
-text(文本框) -password(密码框) -submit(提交) -reset(重置) -button(普通) -image(图片按钮)
-radio(单选) -checkbox（多选框）
name: 控件名称(key)
value: 控件的值
checked: 是否被选中

type: text、password、radio、chechbox、button、submit、reset、image
color date datetime datetime-local email month number
range search tel time url week
name: 控件名称，数据提交的key
value: 控件值，数据提交的value
min:最小值
max:最大值
step:步长
pattern：输入内容的格式规范（正则表达式）
readonly：只读
disabled:禁用
size:控件尺寸
placeholder：文字提示内容
maxlength：最大输入长度
required：是否必填

3.其他表单标签
<select name="">
<option value="" selected> 内容 </option>
....
</select>

<textarea rows="行" cols="列" name="key">
value
</textarea>

4.CSS: 级联样式表

网页构成：W3C标准
-1.结构标准: HTML,XHTML
-2.表现标准: CSS
-3.动态标准: JavaScript,JQuery,Vue

样式使用

*行内样式
<h3 style="color:blue;font-size: 16px">怀化学院</h3>
*内部样式
<style type="text/css">
h3{
/*文本颜色*/
color : blue;
/*字体大小*/
font-size: 16px;
}
</style>
*外部样式
导入式：(部分浏览器不兼容)
<style type="text/css">
@import url("css/value.css");
</style>
链接式(推荐)：
<link type="text/css" rel="stylesheet" href="css/value.css">