HTML学习笔记-CSDN博客

本文链接：https://blog.csdn.net/sxsl_lwp/article/details/115858903

HTML学习笔记

一、HTML开发环境
二、HTML基本框架
三、网页基本标签
四、表单

一、HTML开发环境

打开网页—>点击网页—>按鼠标右键—>审查元素，在网页的下面即可查看HTML源代码等相关内容，同时右边的CSS样表。
W3C，万维网联盟，国际中立性技术标准机构；W3C标准有结构化标准语言（HTML），表现标准语言（CSS），行为标准（DOM、EMCAScript）。
idea中设置浏览器类型打开idea中的网页，File—>setting—>tools—>Web Browsers设置或增减浏览器。

二、HTML基本框架

添加注释的快捷键ctrl+/。
基本框架

<!--DOCTYPE:告知浏览器，本文档将使用何种规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head 表示网页的头部-->
<head>
<!--meta为描述性标签，用了描述网站的一些信息-->
<!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="lwp学" >
    <meta name="description" content="这是我学习Java的地方" >
<!--title网页标题-->
    <title>lwp</title>
</head>
<!--body代表网页主体-->
<body>
hello World
</body>
</html>

head标签代表网页的头部，body标签代表网页的主体。

三、网页基本标签

快速生产标签，输入标签名后按Tab建，如生产段落标签，先输入p，再按Tab后自动生成一个空的段落标签。
基本标签：标题标签：h1到h6，段落标签：p，换行标签：br，水平线标签：hr，粗体标签：strong，斜体标签：em。
特殊符号标签

HTML原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
		不断行的空白

图像标签：img
src:图片的地址，一般采用相对路径；alt：图片不存在时显示的信息；title：鼠标悬停在图片上时显示的内容；width、height：图片的宽与高。
超链接标签：a
(1) href：跳转到的网页
(2) target：在哪儿打开新的网页

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。
(3) 锚链接：页面间的跳转；需要一个标记，跳转到标记。

<!--使用name作为标记-->
<a name="top">顶部</a>

<a href="#top">回到顶部</a>

(4) 功能链接：邮件链接，mailto；qq链接。
6. 块元素（无论多少内容均独占一行）和行内元素（内容撑开宽度，左右均为行内元素的可以排在一行）。
7. 列表：有序ol、无序ul，列表项为li；自定义列表：dl，dt标题，dd列表项。
8. 表格：table，tr行，td列；colspan设置跨多少行，rowspan设置跨多少列。
9. 视频video与音频audio的属性：src存放资源的地方，controls播放控制，autoplay自动播放。
10.网页结构：header、footer、section、article、aside、nav等。
10. iframe内敛框架标签的常用属性:
(1) height可以设置框架显示的高度
(2) width可以设置框架显示的宽度
(3) name可以定义框架的名称
(4) frameborder用来定义是否需要显示边框，取值为1表示需要边框
(5) scrolling用来设置框架是否需要滚动条，取值可以是yes,no,auto
(6) src用于设置框架的地址，可以使页面地址，也可以是图片地址
(7) align用于设置元素对齐方式，取值可以是left，right，top，middle，bottom

四、表单

表单的船艇输入类型
(1) 文本框：文本域通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
(2) 密码框：密码字段通过标签<nput type=“password”> 来定义:。
(3) 单选框：<nput type=“radio”> 标签定义了表单单选框选项；一组单选框的name必须相同，否则无法实现单选。
(4) 复选框：<input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项；一组复选框的name也必须相同。
(5) 提交按钮：<input type=“submit”> 定义了提交按钮.。
(6) 下拉列表：

form>
<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form>

(7) 文本域：

<form>
<textarea name="message" rows="10" cols="30">
输入的内容在这里哦！
</textarea>

HTML Input 属性
(1) value 属性:value 属性规定输入字段的初始值

<form action="">
<input type="text" name="name" value="脚本之家">
</form>

(2) 其他属性：readonly 属性、disabled 属性、size 属性、maxlength 属性、width 属性、height 属性、src 属性（定义以提交按钮形式显示的图像的 URL）、name 属性、checked 属性（规定此 input 元素首次加载时应当被选中）、accept 属性（规定通过文件上传来提交的文件的类型）、
3. 表单的初级验证
(1) placeholder 提示信息
(2) required 非空判断
(3) pattern 正则表达式