HTML学习笔记(一)

作者: 赵楷行 | 来源:发表于2017-03-04 14:20 被阅读125次

windows系统下学习html开发的工具:记事本、WebStorm

若使用记事本开发,编码格式要改为UTF-8,后缀为.html。

学习html的网站:

html参考手册:中文

http://www.w3school.com.cn/

http://www.runoob.com/

html reference: English and/or Chinese

https://developer.mozilla.org/zh-CN/docs/Web

http://docs.webplatform.org/wiki/Main_Pagezzzz


html标题

<head>看起来指代的是标题,其实并不是,它定义的是网页的一些属性。

那么html的标题指的是什么呢?我接触到的是这样几个:

<h1><h2><h3><h4><h5><h6>

一级~六级标题

code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>html学习笔记1</title>

</head>

<body>

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

</body>

</html>

*注明*

<!DOCTYPE html>声明为 HTML5 文档

<html>元素是 HTML 页面的根元素

<head>元素包含了文档的元(meta)数据

<title>元素描述了文档的标题

<body>元素包含了可见的页面内容


html段落

<p>这是一个段落</p>


html空格

html是空白不敏感的语言,任意多个空格会被认作一个,任意多个换行也会被认作一个空格。

东亚双宽的字符若是写的时候不同行,在显示的时候会被放在同行,中间加上一个空格。


要使得文字换行显示,就要用到<br>

如:<h1>一级<br>标题</h1>

要使文字中间有多个空格,使用转义符&nbsp; (nbsp: non-breakable space)

如:<h1>一级&nbsp;&nbsp;&nbsp;标题</h1>


html转义符

既然讲到html转义符了就再举一些常见的转义符的例子:

在html中,被尖括号< >括起来的内容一般都是有一定属性涵义的,并且html有一定的容错率,如果我们在尖括号里加上一段不知所云的英文,html虽然识别不了,但是它会尽可能地理解你,用它博大的胸怀包容你,显示出它认为你可能想要的内容。

比如

充满人文关怀 那么如果我们就是想要显示尖括号内的那一坨内容要怎么办呢,岂不是会被人道毁灭?

因此这个时候,转义符就上场了。

< : &lt;  (less than)

>:  &gt;  (greater than)

<br>&lt;Hello World&gt;

&: &amp;


html字体

<u>下划线</u>

<i>斜体</i>

<b>加粗</b>


html高亮

<mark>Hello World</mark>

<mark>中的默认属性是字体背景变为亮黄色,但是这个属性是可以改的。

<mark style="color:red>content</mark>  字体颜色变为红色,背景色仍为黄色

<mark style="ground-color:red">content</mark>  字体颜色不变,背景色变为红色


<strong> & <em>

通常,我们使用<strong>代替<b>,用<em>代替<i>。

因为<b>和<i>只是将某段内容进行格式上的改动,却没有赋予内容一定的语义内涵(semantic)。


html链接<a>

<a href="网址/地址">标签文字</a>   href: hyper-reference

目标打开方式:

<a href="target.html" target="...">

target:

_blank: 在新窗口中打开被链接文档

_self: default。在相同框架下打开被链接文档

_parent: 和父框架集的打开形式一样

_top: 在整个窗口中打开

framename: 在指定框架中打开


html图片img

引用与html文件在同一文件夹下的图片文件:

<img src="文件名.jpg" alt="alt是图片无法正常加载时显示的内容" width="30%"(or width=100px,在不指定height的情况下图片等比例缩放)>

引用与html文件不在同一文件下的图片文件:

<img src="相对路径/文件名"/>

相对路径:相对于引用此文件的html的路径的路径

<img src="img/01/Koala.jpg"/>

将一张图片作为打开超链接的媒介:

<a href="target.html" target="_blank">

<img src="Koala.jpg" alt="图片无法正常加载">

</a>


html列表

<ol> ordered list

<ul>  un-ordered list

<li>  listitem

可多层嵌套

html定义列表

<dl>  define list

<dt>  define term

<dd>  define description

写法不同,效果一样

html引用

..  父级别

.  同级别


两个比较特别的标签

<div></div> 块状内容block

<span></span>行内内容in-line

用它们在逻辑上来组织网页内容

<div id="heading">

通知

</div>

<div id="content">

<p>第一段</p>

<p>第二段</p>

</div>

<div id="footer">

<span>署名</span>

</div>


<style>

$Title$

#heading{

color:palevioletred;

}

#content{

font-size:200%;

}

</style>


相关文章

  • HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之基础标签

    HTML5学习笔记之基础标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之音视频标签

    HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记...

  • html

    html学习笔记

  • HTML5基本介绍

    HTML5基本介绍 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 ...

  • HTML5—HTML学习

    HTML学习感想: 下面大致的记录了一写HTML的学习笔记 什么是HTML? HTML 是HyperText Ma...

  • 初学HTML

    学习笔记(四)初学HTML HTML初步认识 HTML是英语HyperText Markup Language的缩...

  • HTML 学习笔记(一)

    HTML 简介 什么是 HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyp...

  • HTML学习笔记(一)

    本节学习内容 HTML说明 HTML头部标记 标题字 段落标记 建立超链接 使用图像

    网友评论

    本文标题:HTML学习笔记(一)

    本文链接:https://www.haomeiwen.com/subject/nytkgttx.html