网络安全 Day25-HTML 介绍和简单基础

HTML 介绍和简单基础

  • 1. HTML 介绍
    • 1.1 什么是HTML
    • 1.2 如何编辑HTML
  • 2. Html 基础
    • 2.1 Html 标题
    • 2.2 HTML 段落
    • 2.3 HTML 换行
    • 2.4 HTML 水平线
    • 2.5 HTML 注释
    • 2.6 如何查看网页源代码
    • 2.7 html标签属性
    • 2.8 格式化文字
    • 2.9 HTML 实体
    • 2.10 HTML 超链接

1. HTML 介绍

1.1 什么是HTML

  • Html是一种用来实现Web服务的网页制作语言,通常由浏览器解释和显示页面。
  • Html是一套超文本标记语言(Hyper Text Markup Language)
  • 使用成对标签描述网页内容,例如:
  • Html程序文件须以htm或html作为扩展名

1.2 如何编辑HTML

  • HTML可以由任意文本编辑器创建
  • 常用的编辑工具
    • Dreamweaver(可视化)
    • notepad++(文本)
  • 例子
    <html>
    	<head>
    		<title>网页主题title>
    	head>
    	<body>
    	我是网页内容
    	body>
    html>
    
  • 说明
     与  之间文本是整个网页内容。
    网页主题 之间文本是整个网页主题。
    网页主题
     与  之间是正文页面内容。
    所有标签字母都是小写。
    

2. Html 基础

2.1 Html 标题

  • HTML标题是通过

    -

    等标签进行定义的。

    定义最大标题。
    定义最小标题

  • 例子

    第1个标题

    第2个标题

    第3个标题

2.2 HTML 段落

  • HTML段落是通过

    标签进行定义的

  • 例子

    这是一个段落

    这是另一个段落

2.3 HTML 换行

  • 如果您希望在不产生一个新段落的情况下进行换行(新行),请使用
    标签
  • 例子
    <p>这里是老男孩教育<br>网络安全<br />11期班级p>
    

2.4 HTML 水平线


  • 标签在HTML页面中创建水平线。hr元素可用于分隔内容
  • 例子
    <hr>
    <p>这是一个段落p>
    <hr />
    <p>这是另一个段落p>
    <hr />
    

2.5 HTML 注释

  • 可以将注释插入HTML代码中,提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
  • 例子
    注释是这样写的:
    
    

2.6 如何查看网页源代码

  • 打开网页,只需要单击右键,
  • 然后选择“查看源文件”(IE)或“查看页面源代码”(Firefox)
  • 其他浏览器的做法也是类似的。这么做会打开一个包含页面HTML代码窗口。

2.7 html标签属性

  • 设置颜色背景:
  • 设置图片背景:
  • 内容居中:

    这里的内容居中

2.8 格式化文字

  1. 加粗 This text is bold
  2. 斜体This text is italic
  3. 字体大小颜色老男孩
  4. 预格式化
    想要输出的格式

2.9 HTML 实体

最常用的字符实体

显示结果	    描述		   实体名	实体号
			空格		     	 
<			小于		    <	<
>			大于		    >	>
&			and符号		&	&
"			引号		    "	"
'			单引号	 	'

2.10 HTML 超链接

  • 超链接路径
    • 相对路径
      <a href="oldboy.htm">我的网站</a>
      
    • 网址
      <a href="http://www.yunweibase.com/">运维基地</a>
      
    • 图片做超链接内容
      <a href="oldboy.htm"><img border="2" src="..\1.png"></a>
      
  • 超链接属性target属性
    • _blank在新窗口中打开链接
      <a href="oldboy.htm" target="_blank">
      
    • 父窗口打开,即原窗口打开是默认值
      <a href="oldboy.htm" target="_parent">
      
  • 网页内部超链接:定位具体的位置
    • 定义具体位置name=“C4”
      <a name="C4"><h2>Chapter 4</h2></a>
      
    • 设置超链接指向具体位置
      <a href="#C4">See also Chapter 4.</a>
      

你可能感兴趣的:(老男孩网络安全18期,html)