HTML CSS基础标签与效果示例

需积分: 0 47 浏览量更新于2023-12-25 收藏 8.63MB DOCX 举报

HTML CSS基础是网页制作的基础，可以通过使用HTML（超文本标记语言）和CSS（层叠样式表）来创建美观的网页。在HTML中，有一些常用的标签和属性，如粗体文字使用<b>标签，强调文字使用<em>标签，加强调文字使用<strong>标签，斜体显示使用<i>标签，上标使用<sup>标签，下标使用<sub>标签，换行使用<br/>标签，段落标记使用<p>标签，一级标题使用<h1>标签，无序列表使用<ul>标签，无序列表项使用<li>标签，有序列表只需将<ul>换成<ol>即可变为有序列表。此外，还可以使用<hr/>标签显示一条水平线，使用<a>标签建立超链接，其中属性target=_blank表示在新窗口打开链接，target=_self表示在当前窗口打开链接，href属性可以指向网站、图片、文档等，也可以使用mailto属性发送电子邮件。在CSS中，可以通过选择器来选择要样式化的HTML元素，然后设置相应的样式。CSS可以控制页面的布局、字体、颜色、背景等属性，有助于提升页面的美观度。代码示例如下： ``` <!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; } h1 { color: blue; text-align: center; } p { font-size: 18px; } .container { width: 80%; margin: 0 auto; } img { border-radius: 50%; } </style> </head> <body> <div class="container"> <h1>Welcome to My Website</h1> <p>This is a paragraph with <b>bold</b>, <em>emphasized</em>, and <strong>strongly emphasized</strong> text.</p> <p>This is another paragraph with <i>italic</i> text and some <sup>superscript</sup> and <sub>subscript</sub>.</p> <br/> <p>Here is an unordered list:</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <hr/> <p>And here is an ordered list:</p> <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> <p>Click <a href="https://www.example.com" target="_blank">here</a> for more information.</p> <a href="mailto:info@example.com">Contact us</a> <img src="example.jpg" usemap=""> </div> </body> </html> ``` 此代码演示了如何使用HTML和CSS创建一个简单的网页，包括设置全局字体、页面标题、段落文本、无序和有序列表、水平线、超链接和图片。通过学习HTML和CSS基础，可以为进一步学习网页设计和开发打下坚实的基础，同时也能够更好地理解网页中的各种元素和样式属性。

1、单行文本输入框 text

<form>

登陆信息<br>

用户名称

用户密码

<input type="password" name="password" size=”20”

maxlength=”15”><br>

<input type="submit" value="

</form>

" 定义文本框宽度，单位为单个字符宽度

 定义输入最大字符长度

2、多行文本输入框 textarea

<form>

输入您的建议：<br>

<textarea name="yoursuggestion" cols="20" rows="5"

wrap="

输入内容过多

" ></textarea>

<br>

<input type="submit" value="

提交

</form>

剩余24页未读，继续阅读

Sponge_bob_

粉丝: 8
资源: 2

HTML CSS基础标签与效果示例

Ruby gem docx-html：轻松转换.docx到HTML格式

NET智能docx模板引擎TemplateEngine.Docx使用教程

golang解析.docx文件包使用详解

html+js+css开发源代码项目资源.docx

Div+CSS基础代码网页布局+实例教程.docx

HTML+CSS+JavaScript+AJAX+JQuery.docx

html+css+javascript知识点总结.docx

html+css+js网页设计介绍.docx

html+css考试题及答案.docx

html+css+js网页设计.docx

最新资源