写代码:用Notepad++软件写 或Sublime, notepad
生成网页:将文件另存为: 文件名.html
附网址详解:https://www.quanzhanketang.com/html/html_intro.html
2020-11-20 web实验课代码:
<!DOCTYPE html>
<html>
<head lang ="en-US">
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<h2>Content of the document......</h2>
<a href ="https://lgwindow.sdut.edu.cn/_upload/article/images/3d/b1/6223efe24dae91a847ffe7b27df0/67def483-faa7-44e9-8bd6-a44d0a306dcf.jpg"> this is a link <p> </p></a>
<img src="https://lgwindow.sdut.edu.cn/_upload/article/images/3d/b1/6223efe24dae91a847ffe7b27df0/67def483-faa7-44e9-8bd6-a44d0a306dcf.jpg" alt="W3Schools.com" width="104" height="142">
<p>this is a pig:</p>
<hr>
<p><b>this is a pig :<b></p>
<p>
山东理工大学
淄博
</p>
</body>
</html>
注释:
<body> </body> 之间的是页面呈现出来的
<h1>到<h6>是标题格式
<p></p> 是段落
<img> 是图片:
<img src="123.jpg" alt="W3Schools.com" width="104" height="142">
<img src="https://lgwindow.sdut.edu.cn/_upload/article/images/3d/b1/6223efe24dae91a847ffe7b27df0/67def483-faa7-44e9-8bd6-a44d0a306dcf.jpg" alt="W3Schools.com" width="104" height="142">
src="可以是图片的网址,也可以是图片的名称(与当前代码文件在同一个文件夹中(比如:网页.html 在桌面 要插入的图片也在桌面 就可以在网页上显示))"
alt="图片如果未显示,则显示这里的文字"
<hr>是下划线 不需要</hr>
<p><b>this is a pig :<b></p> <b>是加粗
注释:
The DOCTYPE declaration defines the document type to be HTML
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
颜色设置:
<!DOCTYPE html>
<html>
<head lang ="en-US">
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<hr>
<p>颜色设置:</p>
<h2 style="color:red;">this is a pig</h2>
<p style="color:red;">this is a pig</p>
<p style="color:blue;">this is a pig</p>
<p style="color:green;">this is a pig</p>
</body>
</html>
下划线:
<hr>
颜色设置:style="property:value;"
字体颜色:style="color:green;"
背景颜色设置:
<!DOCTYPE html>
<html>
<body style="background-color:lightgrey;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>