【HTML】introduction to html
2016-06-30 16:49
537 查看
The digest is from the coursera course–HTML,CSS,and Javascript for Web Developers
but sometimes it can be only opening tag.
we can add some attribute in the opening tag. There must be a space between the element name and the attribute name.
if we want to represent tags without content, we should write tags like this:
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!
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 >.
ordered list
unordered list
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.
If we want to write some character not available on a keyboard,we can use html entity.
如果我们需要几个单词不受页面影响一直保持一个整体,也可以用html entity实现。
防止在不同的字符标准中出现奇怪的符号,用html entity解决。
This links can link to the pages in the same directory.
External links
This links can link to other website.
Links in the same page
Often use to navigation.
display external links
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 modelsBlock-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 entity1.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.
< --> < > --> > & --> &
If we want to write some character not available on a keyboard,we can use html entity.
© //represent copyright character
如果我们需要几个单词不受页面影响一直保持一个整体,也可以用html entity实现。
<p>victory nor defeat</p> //修改为 <p>victory nor defeat</p> //实现三个单词保持一个整体而不受页面影响
防止在不同的字符标准中出现奇怪的符号,用html entity解决。
//用html entity代替普通引号 "..." //represent by "..."
Lecture 9
Internal linksThis 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 <then a 100% succcess:</h1> <p> <div> //src后跟图片的名字,width,height可写可不写,但是最好写上,这样即使图片加载不出来, //也会在网页上留足这么大的空间,这样不会破坏排版 //alt属性用来为图像定义一段预备的可替换文本,当图像加载不出来的时候,可以让用户知道该图片要显示的信息,最好写 <img src="146681439320566539.jpg" width="400" height="640" alt="Picture"> </div> "it is an example." </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 <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>
相关文章推荐
- html中onload的使用
- 过滤html恶意代码
- EditPlus中的html自动补全
- EditPlus中的html自动补全
- 关于HTML
- Html-知识点总结
- swiper的基础教程(十二)
- html的input标签,设置size后会影响到页面的放大缩小排版
- HTML的基础学习(第1篇)
- swiper的基础教程(十二)
- html进制转换
- HTML学习笔记1.6-高亮文本及组合使用
- HTML新人基础学习1.4—添加常用的标签
- htmlhe和script结合制作简易计算器
- HTML DOCTYPE 的重要性
- 两种方法实现在HTML页面加载完毕后运行
- HTML 文字逐一显示
- html-tab page
- 使用HTML注释判断IE版本
- html中radio值的获取、赋值、注册事件示例详解