Web前端基础---认识HTML及其组成---标签、框架
2024-05-17 10:58:09
HTML
HTML：Hypertext Markup Language 超文本标记语言
超文本：能够记录文字、标点符号，输入文本、图片、视频、音频和超链接等内容
标记（标签）：将所有内容封装成标签，需要时使用对应标签HTML用于编写网页，可以使用开发者模式（F12）查看源码。特点：
（1）HTML文件名的扩展名为.html或.htm
（2）根标签是<html>，里面分为两个部分<head> , <body>
（3）标签名称不区分大小写，推荐小写
（4）大部分标签成对出现，这类标签必须有开始标签和结束标签
（5）HTML文档是树状结构
（6）HTML嵌套时需谨慎HTML文件的编辑工具：常用工具：Nodepad++,WebStorm,HBuilder推荐工具：HBuilder
HTML常见标签
标题标签<h1></h1>...<h6></h6>
分割线标签：<hr/>width---宽度 size---粗细 color---颜色
文字标签：<font>size---字体大小 color---颜色
加粗标签：<strong></strong>，<b></b>
斜体标签：<em></em>，<i></i>
段落标签<p></p>
实体字符： < > " ©
：空格
<：<
>：>
"：双引号
©：版权符号
注释标签：<!-- 注释内容 -->
HTML图片标签
img标签的语法格式:<img src=”图片路径” width=”” height=”” alt=”” title=””/>
src：设置路径：绝对路径和相对路径，推荐使用相对路径
相对路径：相对于当前文件寻找目标文件。
注意点：
1、同级直接找
2、内部/找
3、返回上一级../
width：宽度，如果只设置宽度不设置高度，那么高度会随着宽度等比变化
height：高度
alt：由于某种原因图片无法显示时的替代文本
title：鼠标悬浮在图片上时的提示文字
HTML列表标签
无序列表
<ul>用来定义无序列表
<li>用来定义列表项
type属性改变列表项前面的符号
属性值：disc（实心圆点），circle（空心圆），square（实心方块）<ul type="circle"><li>韩跳跳</li><li>李白</li><li>李元芳</li>
</ul>有序列表
<ol>用来定义有序列表
<li>用来定义列表项
type属性设置列标签前面的字符：
属性值：1（阿拉伯数字），a（小写字母），A（大写字母），i（小写罗马数字），I（大写罗马数字）<ol type="1"><li>水果</li><li>动物</li><li>人物</li>
</ol>
HTML超链接标签
超链接标签主要用于HTML中页面间的跳转。
语法结构：<a href=”跳转的路径” target=””>点击的内容（图片，文本...）</a>
属性解析：
href：跳转路径,推荐使用相对路径
target：打开页面的方式，常用值：_blank，在新选项卡中打开；_self，在本选项卡打开
跳转方式：
1、网上资源：资源的完整域名
2、自己的资源：相对路径
3、回到顶部：#顶部的ID值-----<font id="1"></font><a href="http://www.baidu.com" target="_blank">百度</a>
<a href="another.html" target="_blank">点击一下</a>
<a href="#1">回到顶部</a>
HTML表格标签
<table>标签用来定义表格<tr>标签用来定义行，是<table>的子标签<td>标签用来定义列（单元格），是<tr>的子标签<th>标签：定义表头信息，是<tr>的子标签，写在<th>中的内容会自动居中加粗<table>标签的常用属性：width：表格宽度height：表格高度border：边框的粗细cellpadding：表格边缘与内容之间的空白cellspacing：单元格之间的空白<tr>标签可以使用height来设置当前行高度，剩下的被剩余行均分
<td>标签可以是用width来设置当前列宽度，剩余的被剩余列均分<table><tr><td>都可以使用的属性：align：针对table标签，设置整个表格相对于浏览器的对齐方式；针对tr和td标签，设置标签中内容的对齐方式取值：left，center，rightbgcolor：设置表格的背景颜色<td>标签常用属性：colspan：合并列rowspan：合并行
HTML表单标签
HTML表单作用：收集用户输入的数据，并按照指定的方式发送到指定的位置，从而实现用户与Web服务器的交互。
<form>：在页面中创建出表单
属性解析：
action：数据提交的路径，通常是服务器地址
method：数据提交的方式，常用值：get，post表单控件及按钮
1、输入标签：<input/>
该标签用于获取用户输入数据，通过type属性值的不同收集不同的信息。
type属性：
text：文本框
password：密码框
radio：单选按钮
checkbox：多选框
file：上传文件
hidden：隐藏框，在页面上但用户看不到
submit：提交按钮
reset：重置按钮
button：一般按钮
image：图形提交按钮name属性：为当前组件提供一个名称，服务器会根据这个名称获取数据
value属性：设置当前组件的值
size属性：设置文本框长度大小
maxlength属性：设置最多输入数据的字符数
readonly属性：只读
disabled属性：设置组件是否可用2、下拉列表<select>
name属性：当前下拉框的名字
<option>标签：<select>的子标签，下拉列表选项
value属性：设置当前列表项提交的数据
selected属性：设置默认选中项3、文本域<textarea>
rows属性：设置文本域可见行数
cols属性：设置最大列数
<form action="" method="post"><!--文本框-->账号：<input type="text" name="userName" value="请输入账号" size="10" maxlength="4" ><br />密码：<input type="password" name="password" /><br /><!--单选-->性别：<input type="radio" name="sex" value="1" checked="checked"/>男<input type="radio" name="sex" value="0"/>女<br /><!--多选-->爱好：<input type="checkbox" name="hobby" value="0"/>篮球<input type="checkbox" name="hobby" value="1"/>排球<input type="checkbox" name="hobby" value="2"/>足球<br />头像：<input type="file" name="photo"/><br /><!--下拉列表-->出生地：<select name="pro"><option value="sc">四川</option><option value="hn" selected="selected">湖南</option></select>省<select name="city"><option>成都</option><option>长沙</option></select>市<br /><!--多行文本域-->自我介绍：<textarea rows="5" cols="100"></textarea><br /><!--提交按钮：--><input type="submit" value="提交"/><br /><!--重置按钮：--><input type="reset" value="重置" /><br /><!--一般按钮：--><input type="button" value="注册"/><br /><!--图形提交按钮：--><input type="image" src="img/李白.jpg" width="50"/></form>
表格表单的布局
<form><table width="400" border="0" cellpadding="0" cellspacing="0"><tr><td colspan="2"><b>表单布局-用户注册</b></td></tr><tr><td align="right" width="30%">用户名：</td><td><input type="txet" name="username" /></td></tr><tr><td align="right" >密码：</td><td><input type="password" name="password" /></td></tr><tr><td align="right">性别：</td><td>男<input type="radio" name="sex" value="1" />女<input type="radio" name="sex" value="0"/></td></tr><tr><td align="right">手机号码：</td><td><input type="text" name="phone" /></td></tr><tr><td align="right">爱好：</td><td>爬山<input type="checkbox" name="hobby" value="0"/>看书<input type="checkbox" name="hobby" value="1"/>阅读<input type="checkbox" name="hobby" value="2"/></td></tr><tr><td align="right">自我介绍：</td><td><textarea rows="5" cols="20" name="introduce"></textarea></td></tr><tr><td align="right"><input type="submit" value="提交信息"/></td><td></td></tr></table></form>
HTML框架标签
1、框架标签<frameset>
在本页面内用多个窗口将多个页面整合到一起。<frame>是<frameset>的子标签，用于将不同的页面整合进来。
<frameset>属性：
rows：确定行数
cols：确定列数
noresize：禁止调整大小
注意：<frameset>不能与<body>同时出现<frame>属性：
src：指定页面路径
noresize：当前frame禁止调整大小2、框架<frameset rows=”” cols=””><frame src=””/></frameset>
如下是frameset.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><frameset rows="20%,*"><frame src="top.html" noresize="noresize"/><frameset cols="20%,*"><frame src="left.html" /><frame src="right.html" name="right"/></frameset></frameset>
</html>
如下是left.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><p><a href="Day01.html" target="right">第一天</a></p><p><a href="Day02.html" target="right">第二天</a></p><p><a href="Day03.html" target="right">第三天</a></p></body>
</html>如下是top.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1 color="black" align="center">学习笔记</h1></body>
</html>
如下是right.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body></body>
</html>
Web前端基础---认识HTML及其组成---标签、框架相关推荐
- Python全栈（九）Web前端基础之2.HTML高级标签和CSS介绍
文章目录 一.HTML高级标签 1.div与span标签 2.表格标签 3.表单标签 二.CSS基础 1.CSS介绍 2.引入样式方式 行内样式 嵌入式 外联式 今日头条文章新零售电商运营调研与架构设 ...
- Web前端基础知识整理
1. 前端基础知识 文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区分大小写 标签要成对出现,形成容器,只能有一个 标签按正确 ...
- 好程序员web前端分享常见html5语义化标签
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总 ...
- WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础 当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础 一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
- web前端基础与CSS入门
web前端基础 1.嵌套列表 注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
- html web前端基础(1)
html web前端基础(1) 本人暂时所用的学习软件是HB(HBuilder) 所以下方代码展示也是在HB所呈现的 什么是web : 1.典型的应用: 1.C / S ***** client: 客 ...
- html clear属性值,【Web前端基础知识】clear使用方法
[摘要] 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.下面是[Web前端基础知识]clear使用方法,小编建议有准备参加考试的备考生一定要合理规划时间,仔细阅读相关规定,提 ...
- HTML及CSS基础入门：web前端基础，看这一篇就够了
写在开头:这是一篇有关于HTTP和CSS的基础入门教程.你也可以将他当作一本字典,因为我将所有可能用到的语法结构全部设置了标题,你只需要点击标题即可跳转过去.同时,我在最后放置了两个CSS实战,以供读 ...
- web前端分享HTML5中的nav标签学习笔记
好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...
最新文章
- python函数分几种_简单了解Python中的几种函数
- iOS 11开发教程（十七）iOS11应用视图之使用按钮接收用户输入
- MyBatis1：MyBatis入门
- Yii2 的快速配置 api 服务 yii2-fast-api
- Web development mistakes
- 解决安装MarkupSafe安装 from setuptools import Feature 报错ImportError: cannot import name ‘Feature‘
- 当关闭子窗口时刷新父窗口
- 用Vue.js递归组件构建一个可折叠的树形菜单
- cefsharp winform 页面里的单击事件不触发_事件详解C 键盘事件及事件流
- Raki的读paper小记：GloVe: Global Vectors for Word Representation
- 【HDU_P3530】Subsequence
- 算法——排序——归并排序图解动画
- 开拓者队医当选年度最佳 球迷：罗伊情何以堪
- 从初级进阶为高级程序员，需要经历什么？
- 计算三角形网格的tangent space
- Brooklyn 2.1.0 (60+超炫苹果标志动画屏保)
- 与“十“俱进 阿里数据库运维10年演进之路 1
- 关于近年来走红的某类综艺节目
- OpenCV-图像色温
- RK3288平台 SPI接口调试步骤