运维初步了解HTML

最新推荐文章于 2024-11-10 16:41:49 发布

weixin_101

最新推荐文章于 2024-11-10 16:41:49 发布

阅读量231

点赞数

分类专栏： IT 运维认知笔记文章标签： linux 运维 html5 python

本文链接：https://blog.csdn.net/weixin_41560737/article/details/108197145

版权

本文是HTML超文本标记语言的初步介绍，涵盖了HTML的基本语法，包括元素嵌套、文档结构、文本样式、标题元素、图像与链接、表格、列表、表单控件等。HTML作为网页制作的基础，常与CSS和Bootstrap结合使用，用于前端开发。

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

HTML超文本标记语言

HTML :网页制作基础
CSS ：层叠样式表，设置样式
bootstrap ：现成的样式

前端：在客户端运行
后端：在服务器运行

静态：图片、HTML、JS

服务器端语言：Python/PHP/java/asp.net
客户端语言：JavaScript

———————————————————————————————————————

HTML 基本语法

网页中的标记也被称作元素
元素，即标记
如包围的部分就叫做body 元素

标记语法：
HTML 用于描述功能的符号称为 “标记” ，比如

、

等

标记在使用时必须使用尖括号括起来
有封闭类型标记，也有非封闭类型的标记

标记会导致不同的显示效果不如： some text here

some text here.

封闭类型标记(也叫双标记) :必须成对出现

<标志> 内容 </标志>

非封闭类型标记，也叫做空标记，或者但标记

<标记/> 或者 <标志>
例如：普通文本 1

元素嵌套

元素之间可以相互嵌套，形成更为复杂的语法
在嵌套元素时需要注意标记的嵌套顺序
如： //开始标记

段落—

//body元素
//结束标记

属性和值
– 属性的声明必须位于开始标记里
–一个元素的属性可能不止一个，多个属性之间用空格隔开
–多个属性之间不区分先后顺序
每个属性都有值
–属性和属性的值之间用 = 等号连接
–属性的值包含在引号中

如：

段落一

//align 是属性名称 center 是属性值

标准属性
–每个元素都有自己所特有的属性
–有些属性是绝大多数元素都支持的属性，称为标准属性（或通用属性）
如： id title class style

注释
–为代码添加适当的注释是一种良好的编码习惯
–注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示
–添加注释的语法如下：

例如：

HTML文档的结构

文档类型声明
html 页面
-文件头：页面头部内容
-文档主体部分：页面的主体内容

文档类型声明
在文档的起始用DOCTYPE 声明指定版本和风格
–让浏览器清楚文档的版本、类型和风格
HTML5
如：

元素

元素用于为页面定义全局信息 - 所有其他元素的容器 - 紧跟在起始标签之后可包含 - title meta script style link 等例如：

 <head>
    <title>HTML 文档</title>
    <meta name = "keywords" content="html,css">
    <script type="javascript"> </script>
    <style type="text/css"> </style>
</head>

文档头部内容

标题元素用于为文档定义标题

标题元素的内容出现在浏览器顶部
没有属性
-必须出现在元素中
一个文档只能有一个标题
例：

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 我的第一个HTML 页面 </title>
</head>
<body>

</body>
</html>

文本与特殊字符

   <                   表示  &lt 
      >                  表示 &gt   
   空格                   表示  &nbsp  
   圈c                       表示  &copy

文本样式

文本样式的作用是对文本进行修饰，如加粗、倾斜等
… : 加粗
… ：倾斜
… : 下划线
… ：删除线
^… : 上标
: 下标

标题元素 n是1-6数字

标题元素让文字以醒目的方式显示，往往用于文章的标题
基本语法：
<h#>…</h#> // #号 = 1,2,3,4,5,6
有6中标题：从

到

         <h#>...</h#>                  //  #号 =   1,2,3,4,5,6 
         div                                       元素    <div>...</div><div>...<div>  中间间隔不大  
           p                                           元素       <p>...</p> <p>...</p>   换行占一行空间大

这是第一块

这是第二块

得到分行不空行这是第一块这是第二块

这是第一块

这是第二块

得到分行空行这是第一块

                                                                        这是第二块

加横线

        <hr>            效果得到 ———————————

换行元素

使用
元素在任何地方创建手工换行
例如 This is a
program
得到 this is a
program

              <span>元素  可以使某一

例如
我们现在讲的是 HTML 得到 HTML是红色

图像与链接

URL
绝对路径：指的是文件从最高目录下开始的完整的路径，无论前路径的是什么，
使用绝对路径总是找到要链接的文件
即完整的URL 组成
协议、主机名、目录路径、文件名
例如：http://www.w3.org/TR/css2/syndata.html
http: 协议名（用:// 分隔）
www.w3.org ：主机名
/TR/css2/ 目录路径
syndata.html 要链接的文件名

相对路径：指文件的位置是相对于当前文件的位置。它包括目录名，或指向一个可以从当前目录
出发找到该文件的路径

例如：表示同一个目录
图片无法显示

图像元素

使用元素将图像添加页面
空标记
必须属性：src
常用属性：width 、height
例如


```html
<img src="https://oimagea3.ydstatic.com/image?
id=-1197059570073062240&amp;product=adpublish&amp;
w=960&amp;h=60" alt="如果图片无法显示，则显示文字">                 //盗取一个网上图片 
<hr>
<img src="free_stock_photo.jpg" alt="图片无法显示">  
<img width="100" src="free_stock_photo.jpg" alt="图片无法显示>

<img width="300px" height="300px" src="free_stock_photo.jpg" alt="图片无法显示>


-----------------------------------------------------------------------------------------------
                                          

## 链接元素 <a>

使用<a> 元素创建一个超级链接，语法如下：
<a href="" target=""> 文本 </a>

href 属性 ：  链接URL
target属性  ： 目标，可取值为_blank    _self 等
name(文本)属性： 锚头名称  

例如  ： 

```html
       <a href="http://www.google.com.hk">To Google</a>

链接的表现形式：
1.目标文档为下载资源
下载

电子邮件链接
联系我们

3 .返回页面顶部的空链接
…

4.链接到JavaScript
JS功能

锚点

锚点是文档中某行的一个记号
用于链接到文档中的某个位置
使用方式
1.定义锚点
锚点1
2.链接到锚点：在锚点前加上 #
锚点1 如果文本/图像与锚点存在同一页面
锚点1 如果文本/图像与锚点存在不同页面

添加锚点
1.在跳转到的位置增加一个标签

这是第一

2.添加a标签，
点击这里跳转到第一块

返回顶部

###################################################################################

创建表格

定义表格：使用成对的

标记
创建表行：使用成对的标记
创建单元元格: 使用成对的

例： table>tr5>td3 按table键会得到以下

给文字加表格

10px大小的表格

表格的常用属性

列表

列表类型：有序列表

1. type 类型：1 数字(不写默认) a小写字母 A大写字母
2. …
3. i 小写罗马数字 I 大写罗马数字
4. …

              无序列表<ul>
               <ul type="">                         type属性值 ：disc  实圆心     circle空圆心   square实心矩形
                       <li>..</li>                                     
                       <li>..</li>
               </ul>

列表项：

用于指示具体的列表内容

                      **例1：无序列表**

<ul type="square">          无序列表开头使用square
    <li>王老师</li>
    <li>牛老师</li>
    <li>丁老师</li>

最低0.47元/天解锁文章

weixin_101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录