【HTML】introduction to html

最新推荐文章于 2024-07-19 15:20:42 发布

summer_06

最新推荐文章于 2024-07-19 15:20:42 发布

阅读量584

点赞数

文章标签： html

本文链接：https://blog.csdn.net/summer_06/article/details/51791661

版权

The digest is from the coursera course–HTML,CSS,and Javascript for Web Developers

Lecture 3

in most cases, there is an opening tag and a closing tag.

<p>...(content)</p> //"p" is an element name

but sometimes it can be only opening tag.

<br> //line break
<hr> //horizontal rule

we can add some attribute in the opening tag. There must be a space between the element name and the attribute name.

<p id = "myId"></p> //"id"-attribute name, "myId"-attribute value

if we want to represent tags without content, we should write tags like this:

<p><\p>

Lecture 4

the basic structure of html.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello,html</title>
</head>
<body>
<p>hello html!i am glad to meet you!</p>
</body>
</html>

Lecture 5

content models
Block-Level elements
Render to begin on a new line(by default)
May contain inline or other block-level elements
In html5, roughly called flow content
Inline elements
Render on the same line(by default)
May only contain other inline elements
In html5, roughly called phrasing content

for more information about content models, click here!

Lecture 6

Heading elements

<h1><h2><h3><h4><h5><h6>  //these are all heading elements

What we should pay attention to is that, heading elements are not supposed to design style, and we should always keep in mind that we should use them to make the structure clearer. In other words, the content in < h1 > must be more important than the content in < h2 >.

Lecture 7

List-provide a natural and commonly used grouping of content.
ordered list

<ol>
  <li>...</li>
  <li>...</li>
</ol>

unordered list

<ul>
  <li>...</li>
  <li>...</li>
</ul>

Lecture 8

HTML entity
1.help avoid rendering issues
2.safeguard against more limited character encoding
3.provide character not available on a keyboard

If we want to write html character as usual content，we should use the html entity.

<  -->  &lt;
>  -->  &gt;
&  -->  &amp;

If we want to write some character not available on a keyboard,we can use html entity.

&copy;  //represent copyright character

如果我们需要几个单词不受页面影响一直保持一个整体，也可以用html entity实现。

<p>victory nor defeat</p>
//修改为
<p>victory&nbsp;nor&nbsp;defeat</p>  //实现三个单词保持一个整体而不受页面影响

防止在不同的字符标准中出现奇怪的符号，用html entity解决。

//用html entity代替普通引号
"..." 
//represent by
&quot;...&quot;

Lecture 9

Internal links
This links can link to the pages in the same directory.

//links-internal.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Internal Links</title>
</head>
<body>
  <h1>Internal Links</h1>
  <section>
    We can link to a file in the same sirectory as this HTML file like this:
    //href后面跟的是要连接的文件名，没有指定文件夹，则默认在该文件所在的文件夹中查找文件
    <a href="same-directory.html" title="same dir link">Linking to a file in the same directory</a>

    <a href="same-directory.html" title="same dir link">
        <div>DIV Linking to a file in the same directory</div>
    </a>
  </section>
</body>
</html>

//same-directory.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>same-directory</title>
</head>
<body>
  <h1>Same directory</h1>
  <section>
    <a href="links-internal.html" title="unsure">Come back to the webpage</a>
  </section>
</body>
</html>

External links
This links can link to other website.

//links-external.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Links</title>
</head>
<body>
  <h1 id="top">External Links</h1>
  <section>
    <p>
        Let's link to a blog of me!
        //herf后面跟要连接的网址，target后写了东西就是另外打开一个新的网页
        <a href="http://blog.csdn.net/summer_06" target="blank" title="my blog">my blog</a>
    </p>
  </section>
</body>
</html>

Links in the same page
Often use to navigation.

//links-same-page
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Links</title>
</head>
<body>
  //id名字用来标识
  <h1 id = "top">Links to Section of The Same Page</h1>
  <section>
    <ul>
        <li><a href="#section1">section1</a></li> //在href后面跟的id名字前不要漏掉"#"号
        <li><a href="#section2">section2</a></li>
    </ul>
  </section>

  <section id="section1"> //id名字用来标识
    <h3>Section 1</h3>
    <p>hhh</p>
  </section>

  <section id="section2"> //id名字用来标识
    <h3>Section 2</h3>
    <p>ahahahahahahaha</p>
  </section>
</body>
</html>

Lecture 10

Displaying images

//display images in the same directory
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Displaying Images</title>
</head>
<body>
<h1>Don't be afraid to be &lt;then a 100% succcess:</h1>
<p>
    <div>
    //src后跟图片的名字，width，height可写可不写，但是最好写上，这样即使图片加载不出来，
    //也会在网页上留足这么大的空间，这样不会破坏排版
    //alt属性用来为图像定义一段预备的可替换文本，当图像加载不出来的时候，可以让用户知道该图片要显示的信息，最好写
    <img src="146681439320566539.jpg" width="400" height="640" alt="Picture">
    </div>
     &quot;it is an example.&quot;
</p>
</body>
</html>

display external links

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Displaying Images</title>
</head>
<body>
<h1>Don't be afraid to be &lt;then a 100% succcess:</h1>
<p>
    //src后跟网络图片的地址
    <img src="http://i2.hdslb.com/bfs/archive/69206e0169b1a21d3b5fdfe9a0f069d000c58463.jpg" width="640" height="480" alt="family">
</p>
</body>
</html>

summer_06

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTML】introduction to html

The digest is from the coursera course–HTML,CSS,and Javascript for Web DevelopersLecture 3in most cases, there is an opening tag and a closing tag.<p>...(content)</p> //"p" is an element namebut so
复制链接

扫一扫