HTML 学習チュートリアル 7: 最初の HTML Template_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML 学習チュートリアル 7: 最初の HTML Template_html/css_WEB-ITnose

Jun 24, 2016 am 11:48 AM

この例では、参考のために、前の 6 つの基本チュートリアルのさまざまな要素の使用法を組み合わせています

&lt;html&gt;&lt;head &gt; &lt;meta charset=&quot;utf-8&quot;&gt;&lt;style type=&quot;text/css&quot;&gt;div#container{width:600}p {margin-left: 20px}h1 {color: red}p {color: blue}&lt;/style&gt;&lt;/head&gt;&lt;body bgcolor=&quot;green&quot;&gt;&lt;div id=&quot;container&quot;&gt;&lt;hr/&gt;&lt;a name=&quot;tip_top&quot;&gt;这是顶部&lt;/a&gt;&lt;a href=&quot;#tips&quot;&gt;跳至底部&lt;/a&gt;&lt;hr/&gt;&lt;h4&gt;链接测试&lt;/h4&gt;&lt;p&gt;&lt;img id=&quot;s_lg_img&quot; src=&quot;http://www.baidu.com/img/bdlogo.png&quot; width=&quot;270&quot; height=&quot;129&quot; alt=&quot;图片无法加载&quot;&gt;&lt;a  name=&quot;label&quot; href=&quot;http://www.qq.com&quot;  target=&quot;qq_main&quot;&gt; 在下面内嵌框架中打开腾讯首页&lt;/a&gt;&lt;/p&gt;&lt;hr/&gt;&lt;h4&gt;内嵌框架&lt;h4/&gt;&lt;iframe src=&quot;http://www.baidu.com&quot; width=&quot;600&quot; height=&quot;200&quot; name=&quot;qq_main&quot; &gt;&lt;/iframe&gt;&lt;hr/&gt;&lt;h4&gt;表单测试：&lt;/h4&gt;&lt;form&gt;  &lt;fieldset&gt;    &lt;legend&gt;用户信息&lt;/legend&gt;    用户：&lt;input type=&quot;text&quot; /&gt;    密码：&lt;input type=&quot;text&quot; /&gt;	&lt;input type=&quot;button&quot; value=&quot;这是按钮&quot;&gt;  &lt;/fieldset&gt;&lt;/form&gt;&lt;hr/&gt;&lt;h4&gt;格式输出测试：&lt;/h4&gt;&lt;h1&gt;春晓&lt;/h1&gt;&lt;pre&gt;    春眠不觉晓，      处处闻啼鸟。        夜来风雨声，          花落知多少。&lt;/pre&gt;&lt;hr/&gt;&lt;!-- cellpadding单元格边距，cellspacing单元格间距 --&gt;&lt;table border=&quot;1&quot; cellpadding=&quot;10&quot; cellspacing=&quot;10&quot; background=&quot;http://www.baidu.com/img/bdlogo.png&quot;&gt; &lt;caption&gt;表格测试&lt;/caption&gt;&lt;tr&gt;&lt;th colspan=&quot;2&quot;&gt;第一列&lt;/th&gt;&lt;th&gt;第二列&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;row 1, cell 1&lt;/td&gt;&lt;td&gt;row 1, cell 2&lt;/td&gt;&lt;td&gt;row 1, cell 2&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;   &lt;ul&gt;    &lt;li&gt;苹果&lt;/li&gt;    &lt;li&gt;香蕉&lt;/li&gt;    &lt;li&gt;菠萝&lt;/li&gt;   &lt;/ul&gt;&lt;/td&gt;&lt;td&gt;row 2, cell 2&lt;/td&gt;&lt;td background=&quot;http://www.baidu.com/img/10.png&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;hr/&gt;&lt;h4&gt;列表测试：&lt;/h4&gt;&lt;ul&gt;  &lt;li&gt;咖啡&lt;/li&gt;  &lt;li&gt;茶    &lt;ul&gt;    &lt;li&gt;红茶&lt;/li&gt;    &lt;li&gt;绿茶      &lt;ul&gt;      &lt;li&gt;中国茶&lt;/li&gt;      &lt;li&gt;非洲茶&lt;/li&gt;      &lt;/ul&gt;    &lt;/li&gt;    &lt;/ul&gt;  &lt;/li&gt;  &lt;li&gt;牛奶&lt;/li&gt;&lt;/ul&gt;&lt;hr/&gt;&lt;kbd&gt;这儿是键盘输入字符&lt;/kbd&gt;&lt;hr/&gt;&lt;p style=&quot;color: red; margin-left: 20px&quot;&gt;This is a paragraph&lt;/p&gt;&lt;h4&gt;段落测试&lt;/h4&gt;&lt;hr /&gt;&lt;p&gt;这是&lt;br/&gt;  第一段&lt;/p&gt;&lt;p&gt;这是&lt;br/&gt;  第二段&lt;/p&gt;&lt;!-- style设置的是链接不带下划线，target设置的是链接在新的窗口中打开 --&gt;&lt;a  name=&quot;label&quot; href=&quot;http://www.baidu.com&quot; style=&quot;text-decoration:none&quot; target=&quot;_blank&quot;&gt; 链接&lt;img border=&quot;0&quot; src=&quot;/i/eg_buttonnext.gif&quot; /&gt;这是一个图片链接&lt;/a&gt;&lt;!-- 这是一条分割线 --&gt;&lt;hr /&gt; &lt;a name=&quot;tips&quot;&gt;这是底部&lt;/a&gt;&lt;a href=&quot;#tip_top&quot;&gt;跳至顶部&lt;/a&gt;&lt;a href=&quot;http://www.w3school.com.cn/html/html_links.asp#tips&quot;&gt;有用的提示&lt;/a&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。