HTML基础语法_html基本语法-程序员宅基地

技术标签: 前端  html  

目录

概念

基本语法

声明

html的基本结构

头部区域

注释

标签

标签属性

常用标签

特殊符号转义

表格

表格的基本结构

表格的属性

表格的合并

表单

表单中的组件


概念

超文本标记语言

超文本:指网页中的内容(超链接,图片,视频等)

标记:指标签 网页通过浏览器进行解释执行,通过标签可以对网页中的内容进行解释

例: < a href="百度一下,你就知道" >百度< /a>

< b >新浪< /b >

html的学习过程就是对各种标签的学习

使用开发工具HBuilder X可以进行对前端语言的开发

基本语法

声明

html4的文档声明

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

html5的文档声明

< !DOCTYPE html >

如果不声明解析网页时会产生一些不可预期的行为,所以我们应该避免出现。

html的基本结构

<!DOCTYPE html> 声明html的语言版本
 <html>是网页的根标签,所有的内容都写在此标签中  作为标记语言必须有一个根标签
    <head>
        <meta charset="utf-8" />设置网页的字符集
        <title></title>设置网页的标题
    </head>
    <body>
        
    </body>
 </html>

< html >…< /html > 标签标记 HTML 文档的开始和结束 < head >…< /head > 标签包括标题和其他说明信息。头部部分 < body >…< /body > 标签包含文本、图像和链接。主体部分

头部区域

Head标签(标签)包含了所有的头部标签标签。 头部区域的标签标签为: < title >, < style >, < meta >, < link >, < script >, < base >.

< title >标签可定义网页的标题

< meta > 标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

< meta > 标签位于文档的头部

< meta charset="utf-8" />设置网页的字符集

< meta name=“keywords” content=“手机,家电" >

< meta name="description" content="免费 Web & 编程 教程" >

< meta name="author" content=“jim" >

标题处添加图标 < link rel="icon" href="ico地址">

注释

< !-- 注释内容-- > 快捷键ctrl+shift+/

标签

HTML中的标记指的就是标签。 HTML使用标记标签来描述网页。 结构: <标签名>标签内容</标签名> 闭合标签(有标签内容), 前一个加开始标签后一个叫结束标签也称为双标签 <标签名/>自闭合标签 (无标签内容),也称为单标签

标签属性

标签的特性,通过设置属性来设置标签的表现形式

属性必须写在开始标签或者自闭和标签中

标签可以有多个属性

属性语法:属性名="属性值"

常用标签

标题标签

只有六级标题

< h1>< /h1>一级标题

< h2>< /h2>二级标题

< h3>< /h3>三级标题

< h4>< /h4>四级标题

< h5>< /h5>五级标题

< h6>< /h6>六级标题

属性:align 属性值有left,right,center设置标题的对齐方式

段落标签

< p>段落文本< /p>标签内的文本表示一段文字

< br />换行标签

列表标签

< ol>< /ol>有序列表标签,列表项前会有数字进行排序 表示一个区域

属性:type 属性值可以改变序号的规则 例如A,Ⅰ,1等

< ul>< /ul>无序列表标签,列表项前有图标标记 表示一个区域

< li>< /li>列表项标签,写在上面两个标签中,表示列表中的一项 表示一行的区域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" /><!-- 设置网页的字符集 -->
        <title>百度</title><!-- 设置网页的标题 -->
        <link href="img/baidu.ico" rel="icon"><!-- 设置标题处的图标,rel指明文件的类型 -->
    </head>
    <body>
        body标签是网页的身体,网页的所有内容都写在此标签中
        
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        
        <p>
            body标签是网页的身体,网页的所有内容都写在此标签中 <br/>
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
        </p>
        <p>
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
        </p>
        <p>
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
            body标签是网页的身体,网页的所有内容都写在此标签中
        </p>
        
        <ol> <!-- 有序列表-->
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ol>
        
        <ul> <!-- 无序列表-->
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
    </body>
</html>

超链接标签

< a>< /a>标签表示一个超链接

网页中通过超链接与网络上的另一个文档相连

语法格式:

< a href="url" target="文档打开方式对应的值">< /a>

href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址) URL(Uniform Resource Locator)统一资源定位符

target的属性值:_blank 在新窗口打开链接地址,默认是当前的窗口

    <body>  
         <a href="http://www.baidu.com" target="_blank">百度</a>       
    </body>

超链接锚点

超链接的一种形式

一般用于导航栏的设置 可以直接定位到网页中的一处"锚点"处

 <a name="top"></a>
        <a href="#p1">图片1</a>
        <a href="#p2">图片2</a>
        <a href="#p3">图片3</a>
        <a href="#p4">图片4</a>
        <a href="#p5">图片5</a>
        
        <h3><a name="p1">图片1</a></h3>
        <img src="img/1.png"/>
        
        <h3><a name="p2">图片2</a></h3>
        <img src="img/2.png"/>
        
        <h3><a name="p3">图片3</a></h3>
        <img src="img/3.png"/>
        
        <h3><a name="p4">图片4</a></h3>
        <img src="img/4.png"/>
        
        <h3><a name="p5">图片5</a></h3>
        <img src="img/5.png"/>
        <a href="#top">返回顶端</a>

图像标签

< img src=“url”>< /img>

属性:width,hegiht设置图像的宽和高 border设置图像的边框

图片标签并不是将图表保存到网页中去,而是引用图片的地址 图片标签可以写在超链接标签中将图表设置为超链接

<a href="http://www.hao123.com" target="_blank">
    <img src="img/hao123.png"/>
</a>

特殊符号转义

HTMl中预留了一些字符,这些字符是不能直接在网页中使用ed

比如< 和 >,我们不能直接在页面中使用< 和 >号,因为浏览器会将它解析为html签。 例如:< b > 会被解析为b标签,空格,再多的空格都会当一个空格处理。 为了可以使用这些预留字符,我们必须在html中使用字符转义。

& lt;与& gt;表示小于和大于符 & nbsp;表示空格符

& reg;注册商标符号 & copy;注册版权符号 & trade;临时商标符号

表格

表格中不仅可以存放数据,早期的表格可以用来网页布局(已淘汰)

表格用一组标签表示分别是

table表格 ​ tr表格的行 ​ th表格的单元格(表头) 内容会默认加粗居中 ​ td表格的单元格(普通) 表格中的数据都是写在单元格中

表格的基本结构

< table>定义表格 < tr>定义表行 < th>定义表头< /th> < /tr> < tr> < td>定义单元格< /td> < /tr> < /table>

表格的属性

border 边界值 background 背景图片 bgclolor 背景颜色

width与hright设置单元格的宽和高(表格的大小默认是由内容决定的)

align 属性值有left,right,center 设置单元格水平对齐的方式

valign 属性值有top,bottom,middle 设置单元垂直对齐的方式

cellpadding 设置单元格内容到边框之间的距离

cellspacing 设置单元格之间的距离 单元格的距离默认为2

 <table border="1"  width="500" height="200" cellpadding="10" cellspacing="0" >
            <tr bgcolor="grey">
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>物理</th>
            </tr>
            <tr align="right">
                <td>99</td>
                <td>88</td>
                <td>77</td>
                <td>66</td>
            </tr>
            <tr align="center">
                <td valign="bottom">99</td>
                <td valign="top">88</td>
                <td>77</td>
                <td>66</td>
            </tr>
            <tr>
                <td>99</td>
                <td>88</td>
                <td>77</td>
                <td>66</td>
            </tr>
        </table>

表格的合并

表格生成的快捷键 table>trn>tdn 按下tab键可以直接生成n行n列的表格

合并单元格 通过单元格的属性

colspan="n" 可以使当前单元格跨列表示n个单元格(合并一行中n个单元格) ​ rowspan="n" 可以使当前单元格跨行表示n个单元格(合并一列中n个单元格)

注意上两个属性时表示n个单元格,所以在使用时要注意删除多余的单元格

<table border="1" width="500" height="200">
            <tr>
                <td></td>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td rowspan="3"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
         </table>

表单

表单中有许多输入式或选择式的组件,用户可以在表单中输入信息,最终将表单中的信息提交到服务器中 form标签 < form>< /form>表示一个表单

属性 action="服务器的地址" method="http请求提交数据的方式"

表单中的组件

表单中的组件不会自动换行

输入式组件

< input type="text"/> 单行文本输入框

属性值:name文本框的名称 value值 ​ disable="disable"设置为禁用 禁用组件后不会再向服务器提交数据 ​ readonly="readonly"设置为只读 还可以像服务器提交数据 ​ placeholder 设置提示信息

< textarea>< /textarea> 多行文本域

属性值 name设置名称 cols与rows设置列数与行数 文本域的值写在标签中而不写在value中

选择性组件

选择性组件都需要设置value值 ​ < input type="radio"/>单选钮组件 单选钮组件必须要设置name值进行分组

属性值checked="checked"设置为默认选中

< input type="checkbox"/>多选框(复选框)组件 多选框(复选框)组件也需要设置name值进行分组

属性值checked="checked"设置为默认选中

< select>< /select>下拉列表组件

name值写在select标签中

value值写在option标签中

< input type="file"/>文件选择组件 ​

按钮组件

value值设置按钮组件的显示的文本

< input type="submit">提交按钮,将表单的数据提交

< input type="reset"> 重置按钮 使表单回到默认状态

< input type="button"> 普通按钮 可以用于触发事件 通过事件可以调用js函数

  <from>
             账号<input type="text" name="account" placeholder="请输入账号" disabled="disabled"/><br />
             密码<input type="text" name="password" placeholder="请输入密码"/><br />
             性别<input type="radio" name="gender" value="男" checked="checked"/>男<!-- 属性值checked="checked"设置为默认选中 -->
                 <input type="radio" name="gender" value="女"/>女<br />
             爱好<input type="checkbox" name="hobby" value="运动1"/ checked="checked">运动1<!-- 属性值checked="checked"设置为默认选中 -->
                 <input type="checkbox" name="hobby" value="运动2"/>运动2
                 <input type="checkbox" name="hobby" value="运动3"/>运动3
                 <input type="checkbox" name="hobby" value="运动4"/>运动4<br />
             
             省份<select name="shengfen"><!-- name值写在select标签中 -->
                 <option value="陕西">陕西</option>
                 <option value="四川">四川</option><!-- value值写在option标签中 -->
                 <option value="上海">上海</option>
             </select><br />
             
             上传图片:<input type="file"/><br />
             
             备注:<textarea name="tips" cols="10" rows="10">123</textarea><br /><!-- 属性值 name设置名称 cols与rows设置列数与行数 文本域的值写在标签中而不写在value中-->
             
             <input type="submit" value="登录" />
             <input type="reset" value="重置" />
             <input type="button" value="普通按钮" />
         </from>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yzl1293346757/article/details/126737508

智能推荐

远程桌面服务器连接失败,Windows服务器远程桌面连接失败是什么原因-程序员宅基地

文章浏览阅读6.1k次。1、先通过显示器直接连接的方式连接到那台连接出错的服务器上。登陆以后,在桌面上的此电脑图标上面点右键,选择属性。2、然后在属性页面中我们可以看到对应的系统版本是Windows Server 2016。CPU是intel xeon型号,内存是16g。这个时候我们点击它左上角的远程设置。3、在远程设置界面,我们可以看到,它默认的设置是允许远程到这台服务器上,但是它下面勾选了”仅允许运行使用网络级别身份..._远程桌面服务无法加入服务器 win-th0hfpjn9vr 上的连接代理。 错误: 当前异步消息

ApacheCN 翻译活动进度公告 2019.6.15-程序员宅基地

文章浏览阅读109次。Special Sponsors我们组织了一个开源互助平台,方便开源组织和大 V 互相认识,互相帮助,整合资源。请回复这个帖子并注明组织/个人信息来申请加入。请回复这个帖子来推荐希望翻译的内容。如果大家遇到了做得不错的教程或翻译项目,也可以推荐给我们。我们会联系项目的维护者,一起把...

Python培训课程深圳,群年轻人正在追捧Python-程序员宅基地

文章浏览阅读182次。记者 | 伍洋宇 袁伟腾编辑 | 文姝琪1李楠打算年底换份新工作,Python方向的、纯软件岗位,发挥空间更大的全栈开发工程师就很不错,目标月薪一万二。这使得他在今年下半年开始系统学习Python。因为本科是计算机专业,期间也自学过Python这门语言,李楠选择了继续自学。学Python真的有用吗?“当然有用啦,没用谁去学它啊。”今年24岁、刚刚毕业一年的李楠这么说。目前他在一家智能硬件公司做嵌入式开发软件工程师,月薪一万,工作是“往硬件里面写软件”,他觉得太枯燥了。“代码都是写好的,基..

Ubuntu下安装R,升级R版本,安装Rstudio,安装Rstudio Server以及安装Shiny Server_marutter-ubuntu-rrutter-focal.list-程序员宅基地

文章浏览阅读2.9k次。一、安装R只需要一步命令:sudo apt-get install r-base二、升级R版本第一步给Ubuntu指定PPA:sudo add-apt-repository ppa:marutter/rrutter第二步:sudo apt-get update第三步:sudo apt-get upgrade三、安装Rstudio直接去Rstudio官网下载最新版的Rst..._marutter-ubuntu-rrutter-focal.list

Redis5.0集群搭建(Redis Cluster)_rediscluster搭建 5.0-程序员宅基地

文章浏览阅读9.1k次。Redis5.0集群搭建RedisCluster_rediscluster搭建 5.0

题目-java基础_面向过程的程序设计是把计算机程序视为一系列的命令集合-程序员宅基地

文章浏览阅读405次。多线程和单线程线程不是越多越好,假如你的业务逻辑全部是计算型的(CPU密集型),不涉及到IO,并且只有一个核心。那肯定一个线程最好,多一个线程就多一点线程切换的计算,CPU不能完完全全的把计算能力放在业务计算上面,线程越多就会造成CPU利用率(用在业务计算的时间/总的时间)下降。但是在WEB场景下,业务并不是CPU密集型任务,而是IO密集型的任务,一个线程是不合适,如果一个线程在等待数据时,把CPU的计算能力交给其他线程,这样也能充分的利用CPU资源。但是线程数量也要有个限度,一般线程数有一个公式:最佳启_面向过程的程序设计是把计算机程序视为一系列的命令集合

随便推点

储能8串电池用140W DCDC电路2 USB_A 2个 TYPE-C 2A2C_pl56002-程序员宅基地

文章浏览阅读78次。储能8串电池,输出是2个C口,2个USBA口,功率是C1:140W,C2:100W,A1:18W,A2:18W.A1,A2不降功率,使用IP2736,IP2723T,IP2163,_pl56002

python3.8.1手机版下载-Python官方下载|Python最新版 V3.8.1 -推背图下载站-程序员宅基地

文章浏览阅读2k次。Python最新版是一款功能强大脚本编程软件。Python最新版它可以帮助编程人员更加便捷的进行代码编写,适合完成各种高层任务,兼容所有的操作系统中使用,因为它的便捷性,在程序员中得到广泛的应用,新入门的编程学习者可以使用它快速学习,欢迎前来下载!功能特点1、简单易学Python极其容易上手,因为Python有极其简单的说明文档 。2、免费开源Python是FLOSS(自由/开放源码软件)之一。3..._手机版python官网下载

Unity3D学习之(坦克大战解析)-程序员宅基地

文章浏览阅读3.9k次。欢迎大家光临我的博客!对坦克大战项目的解析:一、游戏模块主要是:注册模块、登录模块、我方模块、和敌方模块。①注册模块:可以跳转到登录界面!②登录模块:可以跳转到游戏界面!③我方模块:可以前后左右移动,可以发射子弹,可以死亡销毁。④敌方模块:可以可以发射子弹,追踪我方的位置,也可以随机出现,可以死亡销毁。 二、所用到的技术①键盘事件 //敌我双方通过键盘上下左右键的移动②位移 ...

【linux】进程和线程的几种状态及状态切换_linux线程状态-程序员宅基地

文章浏览阅读3.6k次,点赞46次,收藏54次。进程和线程的状态_linux线程状态

Java/Mysql数据库+SSM+学生信息管理系统 11578(免费领源码)计算机毕业设计项目推荐上万套实战教程JAVA、PHP,node.js,C++、python、大屏可视化等-程序员宅基地

文章浏览阅读1.1k次,点赞22次,收藏20次。免费领取项目源码,请关注●点赞●收藏并私信博主,谢谢~本系统以实际运用为开发背景,通过系统管理员可以对所有的学生和教师等人员以及学生相关联的一些学生管理、分配任务、完成任务、打卡签到、师生交流等数据信息进行统一的管理,方便资料的保留。教师和学生可以通过注册,然后登录到系统当中,对分配任务、完成任务、打卡签到以及师生交流这些信息进行查询管理。总的来说,系统的前台是通过Java页面展示,后台使用SSM这个框架,数据库采用目前流行的开源关系型数据库MYSQL。

如何在群辉NAS系统下安装cpolar套件,并使用cpolar内网穿透?_在群晖nas安装cpolar套件-程序员宅基地

文章浏览阅读1.2k次,点赞39次,收藏34次。群晖作为大容量存储系统,既可以作为个人的私有存储设备,也可以放在小型企业中作为数据中心使用。其强大的数据存储和管理功能,让其还能够胜任更多任务。但由于群晖的应用场景所限,这些功能通常只能在局域网内实现,想要让群晖NAS存储的数据能在公网访问到,我们可以借助cpolar的辅助,轻松实现在公共互联网访问内网群晖NAS上的数据。在这之前,我们还是需要了解下cpolar的基本操作方式。_在群晖nas安装cpolar套件