Web程序设计笔记第二章-HTML/XHTML

web前端 > html 前端 html 笔记
发布时间 :
字数:872 阅读 :
  1. 2.1 HTML和XHTML的起源和演变
  2. 2.2 基本语法
  3. 2.3 HTML文档的标准结构
  4. 2.4 基本的文本标记
    1. 2.4.1 段落
    2. 2.4.3 保留空白字符
    3. 2.4.4 标题
    4. 2.4.5 文本块引用
    5. 2.4.6 字体样式与大小
    6. 2.4.7 字符实体
    7. 2.4.8 水平线
    8. 2.4.9 meta元素的其他用法
  5. 2.5 图片
  6. 2.6 超链接

2.1 HTML和XHTML的起源和演变

略

2.2 基本语法

HTML的基本语法单位称为 标签。

1
<!-- 这是html的注释格式 -->

2.3 HTML文档的标准结构

html的声明：

1
<!DOCTYPE html>

html文档必须包含的四组标签：

1
2
3
4
5
6
7
8
9
<html lang="en"> <!-- html元素可以包含一个特性 lang，用于指定编写文档所用的语言 -->
    <head>  <!-- 一个文档包含 头(head)和主体(body)两部分 -->
        <title>这是文档的标题，显示在浏览器顶部的标题栏</title>
        <meta charset ="utf-8"/><!-- meta 元素用于提供关于文档的额外信息 --> 
    </head>
    <body>
        
    </body>
</html>

2.4 基本的文本标记

2.4.1 段落

1
2
3
4
5
6
7
<p>
    adf 
    da dsaf
    	 fda
</p>
浏览器会忽略换行符，将<p>中的文本填充为一行，在每行末尾自动换行
如果<p>不在行首位置，浏览器会自动从<p>换行，并在中间插入一个空白行

上图运行结果为：

adf da dsaf fda

### 2.4.2 换行 
1
2
<br/>
常用于<p>和</p>之间的文本中，起换行符的作用

2.4.3 保留空白字符

1
2
3
4
5
<pre>
    adf 
    da dsaf
    	 fda
</pre>

运行效果如下：

    adf 
    da dsaf
         fda

2.4.4 标题

1
2
3
由大到小，共有<h1><h2><h3><h4><h5>和<h6>六级标题

其中,<h4>为默认字体大小

标题标签会导致换行

2.4.5 文本块引用

1
2
3
4
5
6
7
<blockquote>
    <p>
        afa;fjadfafafdsdddddddddddddddddddddddddddddddddd
        dddddddddddddddddddddddddddd
    </p>
</blockquote>
<blockquote>标签会将在其中间的文本进行双向缩进，但是在markdown中效果为引用栏

2.4.6 字体样式与大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
强调标签
<em>
    效果为斜体
</em>
强调标签
<strong>
	粗体
</strong>
代码标签
<code>
用于指定等宽字体，常用于代码
</code>
上标<sup>和下标<sub>
x<sub>2</sub><sup>3</sup>+y<sub>1</sub><sup>2</sup>

效果如下：

效果为斜体


粗体


用于指定等宽字体，常用于代码

x23+y12

2.4.7 字符实体

&nbsp；非换行空格

2.4.8 水平线

1
2
<hr/>
画一条水平的线条，分开上下文

2.4.9 meta元素的其他用法

用于提供附加信息 两个标签 name和content

2.5 图片

1
<img src ="c210.jpg" height ="200" width="200"alt= "Picture of a Cessna 210" />

src 指定图片文件

alt 图片无法显示时用于替换的文本

width height 宽度和高度，也可以指定为百分比值

2.6 超链接

1
2
3
4
5
6
7
8
<a href="https://www.jd.com/">京东</a>
href指定资源地址
在<a></a>中使用 target="_blank"  可在新窗口打开链接

id 属性可用于创建一个 HTML 文档书签,点击后可以跳转到该id属性所在元素的位置
<a id="tips">有用的提示部分</a>
<a href="#tips">访问有用的提示部分</a>、
download 属性可以指定该链接为下载链接

有用的提示部分

访问有用的提示部分

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论

©2017 X

Built with Hexo and 3-hexo theme