Web前端入门之HTML基础笔记
2024-06-03 10:09:02
目录
1.我的第一个HTML页面
2.基本标签
3.实体符号
4.表格
5.表格-单元格的合并
6.表格-th标签
7.表格-thead tbody tfoot
8.背景颜色和背景图片
9.图片
10.超链接
11.列表
12. 表单01
13.表单02
14.表单03
15. 下拉列表多选
16.file控件
18.readonly和disabled
19.maxlength属性
20.HTML元素的id属性
21.div和span
1.我的第一个HTML页面
<!--这是html的注释信息-->
<!--这是根-->
<html><!--头--><head><!--标题栏--><title>my first html page</title></head><!--网页体--><body><!--这里的内容显示到网页上！-->这是我的第一个HTML页面！<input></body>
</html>显示的效果 ：
2.基本标签
<html><head><title>基本标签</title></head><body><!--段落标记分段--><p>《水浒传》取材于北宋末年以宋江为首的一百零八好汉从聚义梁山泊，到受朝廷招安，再到征四寇，灭叛党，最终却遭奸人谋害的英雄故事。《水浒传》的内容构成可以分为两大部分。前七十回是一大部分，主要抨击统治阶级的腐朽残忍和歌颂起义英雄的反抗精神；七十回以后写受招安、征辽、征田虎、征王庆、征方腊，是另一大部分。</p><p>前一部分写人民反官府，反映的是阶级矛盾；后一部分写忠臣反奸臣，反映的是统治阶级的内部矛盾。宋江等受招安以后，处处受到奸臣的排挤和陷害，甚至最终被害死。</p><!--标题字--><h1>标题字</h1><h2>标题字</h2><h3>标题字</h3><h4>标题字</h4><h5>标题字</h5><h6>标题字</h6><!--换行标记--><!--下面这样是无法换行的-->helloworld!<!--独目标记-->hello<br>world!<!--水平线，独目标签--><hr><!--color是一个属性，用来指定颜色的值--><!--color是属性的名字，red是属性的值--><hr color="red"><!--HTML中的字符串可以使用单引号和双引号，甚至不打引号--><hr color='red'><hr color=green><!--HTML不区分大小写--><HR><!--预留格式--><!--保留格式，在HTML源码上是什么格式，到网页上还是这个格式--><pre>for(int i=0;i<100;i++){System.out.println("i="+i);}</pre><b>粗体字</b><i>斜体字</i><ins>插入字</ins><del>删除字</del><!--将字符显示在其它字符的左上角-->10<sup>2</sup><!--将字符显示在其它字符的左上角-->m<sub>2</sub><!--font字符标签--><!--color是字体颜色，size是字号--><font color='red' size='12'>hello world!</font><br><br><br><br></body>
</html>显示的效果：
3.实体符号
<!--凡是HTML页面中第一行是以下代码的表示该页面是一个HTML5页面：H5-->
<!DOCTYPE html>
<html><head><!--这是告诉我们浏览器采用哪一种字符编码方式打开该页面，一般这个编码方式要和文件的编码方式相同，否则会乱码--><!--windows操作系统的浏览器在没有指定任何编码方式的时候，浏览器默认采用GBK的简体中文的方式打开，这是因为windows操作系统是简体中文环境--><!--而程序员一般工作区当中文件的编码方式都是UTF-8，因为Unicode更加通用--><!--当前这个文件就是UTF-8的编码方式，如果不写下方代码，浏览器会采用GBK的方式打开，会出现乱码--><meta charset="utf-8" /><title>实体符号</title></head><body><!--空格--><!--  ；这是一个空格，属于实体符号！ -->a<br>a bc<br><!-- < 小于号--><!-- > 大于号-->b<a>c</body>
</html>
显示的效果：
4.表格
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>HTML表格</title>
</head>
<body><!--3行3列的table--><!--border用来设置边框的高度，1px表示1像素--><!-- <table border="1px" width="300px" height="200px"> --><!--还可以写成百分比的方式，表示占浏览器屏幕的多少，随窗口大小变化--><table border="1px" width="50%" height="200px" align="center"><!--第一行--><tr><!--第一个单元格--><td>1</td><td>2</td><td>3</td></tr><!--第二行--><tr align="center"><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td align="center">3</td></tr></table>
</body>
</html>
5.表格-单元格的合并
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>表格-单元格的合并</title>
</head>
<body><table width="50%" border="1px"><tr><td>1</td><!--colspan表示列合并，合并2个--><td colspan="2">xy</td><!-- <td>1</td> --></tr><tr><td>1</td><td>1</td><td rowspan="2">1</td></tr><tr><td>1</td><td>1</td><!-- <td>1</td> --></tr></table>
</body>
</html>
6.表格-th标签
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>th标签</title>
</head>
<body><table border="1px" width="50%"><tr><!--<td>员工编号</td><td>姓名</td><td>薪资</td>--><!-- th可代替td做单元格，th中的内容会自动加粗，会自动居中 --><th>员工编号</th><th>姓名</th><th>薪资</th></tr><tr><td>4143</td><td>aa</td><td>800.0</td></tr><tr><td>1145</td><td>bb</td><td>600.0</td></tr></table>
</body>
</html>
7.表格-thead tbody tfoot
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>thead tbody tfoot</title>
</head>
<body><!--一个table可以被thead tbody tfoot分隔为三部分--><!--这个语法主要是为了后期js提供方便--><table border="1px" width="50%"><thead><tr><th>员工编号</th><th>姓名</th><th>薪资</th></tr></thead><tbody><tr><td>4143</td><td>aa</td><td>800.0</td></tr><tr><td>1145</td><td>bb</td><td>600.0</td></tr></tbody><tfoot><tr><td>x</td><td>y</td><td>z</td></tr></tfoot></table>
</body>
</html>
8.背景颜色和背景图片
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>背景颜色和背景图片</title>
</head>
<!--body标签的bgcolor属性指定颜色-->
<!--<body bgcolor="red">--><!--body标签的background属性指定背景图片-->
<body background="指定一个图片的路径">
</body>
</html>
9.图片
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>图片</title>
</head>
<!--背景图片-->
<body background="图片路径"><!--这个图片是网页中的一个元素--><!--<img src="图片路径"></img>--><!--开始标签和结束标签之间没有内容的话，可以直接把结束标签删掉，开始标签末尾添加 /--><img src="图片路径" width="" height="" alt="" /><!--img标签的属性有哪些呢？--><!--src属性：用来指定图片的路径--><!--width属性：用来指定图片的宽度，高度会等比例缩放，就是说不必要再去手动设置高度，否则容易失帧--><!--title属性用于设置鼠标悬停时的提示信息--><img src="图片路径" width="200px" title="提示信息" /><!--alt用来指定当前图片加载失败时的提示信息--><img src="图片错误或无效路径" alt="提示信息" />
</body>
</html>
10.超链接
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>超链接</title>
</head>
<body><!--链接到百度--><!--href 属性表示：hot references，用来指定链接的路径--><a href="http://www.baidu.com">百度</a><br><!--链接路径可以是网络中的路径或本地的路径--><!--超链接的特点：鼠标停留在超链接上自动变成小手，超链接自动加下划线--><a href="004表格.html">链接到本地的表格</a><br><!--图片也可以做超链接--><a href="http://www.baidu.com"><img src="图片路径" width="200px" title="提示信息" /></a><br><!--关于超链接的target属性--><!--target属性用来设置，最终打开窗口的位置--><!-- _self:当前窗口（默认） _blank:新窗口 _parent:当前窗口的父窗口 _top：当前窗口的顶级窗口--><a href="http://www.baidu.com" target="">百度</a><br><!--一个窗口中的内部窗口--><iframe src="004表格.html"></iframe>
</body>
</html>
补充
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body>top<iframe src="parent.html" width="500px" height="500px"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body>parent<iframe src="self.html" width="300px" height="300px"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body>self<a href="http://www.baidu.com" target="_self">百度</a><a href="http://www.baidu.com" target="_parent">百度</a><a href="http://www.baidu.com" target="_top">百度</a><!--<iframe src="" width="" height="" id="test" name=""></iframe>-->
</body>
</html>
11.列表
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>列表</title>
</head>
<body><!--无序列表--><ul type="circle"><!--列表项--><li>中国</li><ul type="square"><li>北京</li><ul type="disc"><li>朝阳区</li><li>海淀区</li><li>东城区</li></ul><li>上海</li><li>台湾</li><li>香港</li></ul><li>美国</li><li>日本</li><li>俄国</li></ul><!--有序列表--><ol type="A"><li>水果</li><ol type="a"><li>香蕉</li><li>苹果</li><li>梨</li></ol><li>蔬菜</li><ol type="1"><li>白菜</li><li>芹菜</li></ol><li>茶</li></ol>
</body>
</html>
12. 表单01
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>表单</title>
</head>
<body><!--1、什么是表单，有什么用？发送请求，并且携带数据给服务器。表单和超链接有共同的特征，就是都可以向服务器发送请求，只不过超链接是用户直接点击发送请求，不能填写数据。而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。表单最主要的作用就是：收集用户的信息。表单对应的英语单词是：form2、怎么定义一个表单对象呢？语法格式是什么？<form>表单项1：表单项2：</form>另外要注意：一个网页上可以有多个表单对象。3、form标签中有一个action属性，和超链接的href相同，都要填写url。--><!--超链接--><a href="http://baidu.com">百度</a><!--表单--><form action="http://baidu.com"><!--按钮，提交表单的按钮，只要点击这个按钮，就发送请求了！--><!--所有能够提交表单的按钮，type必须是submit，不能随便写--><!--<input type="submit"/>--><!--设置按钮上显示的文本--><input type="submit" value="百度"/><!--button是一个普通的按钮，不能提交表单--><!--<input type="button" name="test" value="" />--></form><!--submit放在form外面也是不行的--><input type="submit" value="百度"/></body>
</html>
13.表单02
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>表单</title>
</head>
<body><!--画一个登录的表单--><!--action路径随便写了--><!--http://192.168.145.2:8080/crm/login协议：http协议访问的服务器的ip是：192.168.145.2访问这个服务器上的哪个软件：8080端口对应一个服务/crm/login:是这个服务器上的某个资源名！（它可能是一段处理登录的java程序！）==========重点===========表单最终提交的时候，表单项的内部属性非常重要，有name的才会提交，没有name不会提交，并且浏览器向服务器提交的数据格式是？url?name=value&name=value&name=value&name=value&name=value以上的提交数据的格式，是W3C指定的格式，所有的浏览器都是这样的。以下表单提交数据的时候，格式是这样的：http://192.168.145.2:8080/crm/login?x=zhangsan&y=111类似map：key value----------------------x zhangsany 111--><form action="http://192.168.145.2:8080/crm/login"><!--input是输入域，type不同，展示样式不同，text表示文本框--><!--文本框的密码框的value是不需要程序员提供的，是用户输入的-->用户名：<input type="text" name="x"/><br /><!--type="password"表示密码框-->密码：<input type="password" name="y"/><br /><!--提交表单的按钮--><input type="submit" value="登录" /></form>
</body>
</html>
14.表单03
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册的表单</title></head><body><!-- name有，就能提交，没有name属性就不能提交。 --><!-- 提交格式：name=value&name=value&name=value --><!-- 表单中，如果有一些项用户没有填写，默认提交的就是空字符串："" --><form action="http://localhost:80/crm/register">用户名 <input type="text" name="username" /><!-- value不需要程序员提供 --><br>密码 <input type="password" name="userpwd" /><!-- value不需要程序员提供 --><br>性别 <!-- 最终提交给服务器的数据是：sex=1 或者 sex=0 --><!-- 同一组的单选按钮，name是需要一致的，这样才可以做到单选的效果 --><!-- checked 表示默认选中此项 --><input type="radio" name="sex" value="1" checked />男 <!-- value需要程序员提供 --><input type="radio" name="sex" value="0"/>女 <br>兴趣<!-- 复选框，同一组的复选框name也是一致的。 --><input type="checkbox" name="aihao" value="smoke"/>抽烟 <!-- value需要程序员提供--><input type="checkbox" name="aihao" value="drink" checked />喝酒<input type="checkbox" name="aihao" value="firehair" checked />烫头<br>学历<!-- 下拉列表 --><select name="xueli"><!-- 假设选中专科，提交的是：xueli=zk --><option value="gz">高中</option><option value="zk">专科</option><option value="bk" selected >本科</option><!-- selected默认选中 --><option value="ss">硕士</option></select><br>简介<!-- 文本域 --><!-- value是用户填写的！--><textarea rows="10" cols="60" name="jianjie"></textarea><br><!-- 提交表单 --><input type="submit" value="注册" /><!-- 这个提交按钮不能有name，不然，这个按钮的value也会提交给服务器。 --><!-- 重置按钮 --><input type="reset" value="重置" /><!-- 普通按钮不能提交 --><input type="button" value="普通按钮" /></form><!-- 不管用！ --><input type="reset" value="重置" /></body>
</html><!--
http://localhost/crm/register?
username=jack
&
userpwd=123
&
sex=0
&
aihao=smoke
&
aihao=firehair
&
xueli=zk
&
jianjie=fdsafdsa
-->
15. 下拉列表多选
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>下拉列表多选</title></head><body><!-- multiple 表示下拉列表支持多选 --><!-- size是设置下拉列表一次最多显示的条目数量。 --><select name="province" size="3" multiple ><option value ="hebei">河北省</option><option value ="henan">河南省</option><option value ="shandong">山东省</option><option value ="shanxi">山西省</option><option value ="hubei">湖北省</option><option value ="hunan">湖南省</option></select></body>
</html>
16.file控件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>file控件</title></head><body><!-- 后台java程序使用IO流的方式接收这个文件！ --><form action="http://www.baidu.com">文件：<input type="file" /><br><br><br><br><input type="submit" value="文件上传" /></form></body>
</html>
17.hidden控件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>hidden控件</title></head><body><!-- hidden隐藏域空间 --><form action="http://127.0.0.1:8080/crm/save" ><!-- 隐藏域 --><!-- 不希望用户在浏览器上看到，但是希望可以将这个数据提交过去！ --><input type="hidden" name="usercode" value="11111"/><!-- 提交按钮 --><input type="submit" value="提交" /></form><!-- 最终提交：http://127.0.0.1:8080/crm/save?usercode=11111 --></body>
</html>
18.readonly和disabled
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>readonly和disabled</title></head><body><!--readonly和disabled都是只读的！ --><!-- http://127.0.0.1:8080/crm/save?orgcode=1111 --><!-- readonly修饰的表单项可以提交给服务器，但是disabled修饰的不会提交！ --><form action="http://127.0.0.1:8080/crm/save">机构代码 <input type="text" name="orgcode" value="1111" readonly /><br>用户代码 <input type="text" name="usercode" value="2222" disabled /><br><input type="submit" value="提交" /></form></body>
</html>
19.maxlength属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>maxlength属性</title></head><body><!-- 最多输入3个字符 --><input type="text" maxlength="3" /></body>
</html>
20.HTML元素的id属性
<!DOCTYPE html>
<html id="myhtml"><head id="myhead"><meta charset="utf-8"><title id="mytitle"></title></head><body id="mybody"><!-- HTML元素的id属性 --><!-- 1、在HTML中任何一个节点上，多有id属性2、在同一个网页中，id属性是不能重复的。3、id代表了这个节点，id是这个节点的身份证号。4、后期学习了javascript之后，我们要通过javascript对HTML的节点进行增删改，对节点增删改的时候，需要先获取到该节点对象，id属性可以让我们方便的获取到该节点对象。5、通过id属性可以很方便的在Javascript中获取到该节点，然后对这个节点进行操作，最终产生网页的动态效果，所以javascript可以让死气沉沉网页活跃起来。--><form id="myform"><input id="username"></form><ul id="myul"><li id="myli"></li></ul></body>
</html>
21.div和span
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>div和span</title></head><body><!-- div和span --><!-- 1、div和span都是图层。（div和span都是盒子）2、什么是图层，有什么用？每一个图层在网页当中都是一个独立的盒子。图层的最主要作用就是：网页布局3、table表格不是可以布局吗？table表格布局有什么缺点：不灵活div和span布局更加灵活。4、每一个div和span左上角的顶点，都有x和y轴的坐标，通过这个坐标可以定位div在网页当中的位置。可以通过CSS样式进行定位。5、很久以前都是采用table进行布局，现代化的网页都是采用div+span进行布局。6、对于web前端来说，怎么调试程序？每一个浏览器都内置了调试器。使用快捷键F12，可以调出来调试器。7、div和span有什么区别？div默认情况下独自占用1行。span不会独占行！--><div id="div1">我是一个div！</div>是新的一行吗？<span id="myspan">我是一个span标签！</span><!-- div嵌套--><div id=""><div id=""><div id=""><span id=""></span><span id=""></span></div></div></div></body>
</html>
Web前端入门之HTML基础笔记相关推荐
- 黑马pink老师Web前端入门笔记（二）
Web前端入门 二.HTML标签 (一) 学习目标 (二)HTML语法规范 (三) HTML基本结构标签 (四) 开发工具 (五) HTML常用标签 1.语义标签: 2.标题标签(重要): 3.段落和 ...
- 前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言 本文完全基于 参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...
- 好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
- web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
- web前端入门学习 html5（1）
web前端入门基础教程,最适合零基础前端小白的视频教程html5+css3 文章目录 html 浏览器内核 web标注 语法规范 html基本结构标签 web常用开发工具 vscode基本使用 文档类 ...
- web前端入门必知的10个技术
随着HTML5的发展和普及,了解HTML5将成为Web开发人员的必修课.如何把网页做得更美观,对用户更有吸引力,不仅是企业对前端开发人员要求,更是一个合格的web前端工程师的自我修行.今天小编就跟大家 ...
- html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案 发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南 优点 简单,不需要工程,不用puppeteer生成骨架d ...
- 学Web前端开发需要哪些基础？零基础小白该怎么入行？
Web前端人才需求大.薪资待遇好,是公认的高薪行业.很多人想学前端却又担心学不会,学Web前端需要哪些基础?零基础小白该怎么入行?且看小编的分析. 前端开发是创建Web页面或APP等前端界面呈现给用户 ...
- web前端入门指南：来看看这位大佬的学习之路吧！
开始他的表演 第一章:为什么要学习前端开发?web前端开发是什么? 从事前端开发工作差不多3年了,自己也从一个什么都不懂的小白积累了一定的理论和实践经验.编写<Web前端入门指南>系列文章 ...
最新文章
- 从源代码编译里程碑的 ICS ROM
- vsftpd学习笔记
- 给GridView中的buttonField添加一个删除确认功能
- 京东商城pop开放平台产品经理
- win8.1 php mysql,win8.1（64位） apache2.4.3+php5.6.3+mysql5.6安装
- 知道python网课答案_Python程序设计答案
- Java线程的6种状态
- ITIL V3 服务转换篇 之 服务转换阶段的组织形式
- Linux学习总结（58）——生产环境运维故障处理指南
- 遗传算法的基本概念和实现（附 Java 实现案例）
- 在三层交换上配置ciscoVTP实验
- 计算机编程ebcdic码,ASCII码和EBCDIC码
- 组策略 计算机配置 安全设置,使用组策略配置 Windows 防火墙设置
- 《Linux C编程环境》 课程大实验 及近期练习题：计算器，复写机，目录树创建，批处理执行器，扫雷
- 硬件工程师常用的电路基础公式+换算！
- 计算机怎样设置桌面照片,怎么把一张照片设置成适合自己电脑桌面的壁纸
- python爬虫爬取网页内容
- 计算机函数sumif求平均值,『如何用sumif求平均年龄』excel表中如何算平均数及标准差...
- 在NW.js里面使用node-printer
- 如何选择微信小程序开发框架？2018年更新
热门文章
- 2020电力电缆模拟考试题及电力电缆作业考试题库
- 奈学java资深研发工程师课程
- 计算机专业基础考806,成都信息工程学院
- 重启服务器后磁盘显示空余变大,（已解决）开机后发现服务中Superfetch服务项会导致磁盘利用率在85%以上,重启后依旧...
- 数字电视机顶盒的接收过程
- VM虚拟机安装系统出现Operating system not found或Directory “ZEBOOT” not found Error loading iMage错误，保姆级解决教程
- x86系统和linux系统,ARM与X86的比较
- 【码绘】p5.js自画像
- 奶爸程序员 · 养成记
- pos系统开发步骤3-销售业务的实现