网页设计之html入门二

最新推荐文章于 2024-06-14 07:44:22 发布
最新推荐文章于 2024-06-14 07:44:22 发布
阅读量128 收藏 3
点赞数 4
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljs298443/article/details/117479389
版权

 

html入门二

一、列表

1.有序列表：

    <h2>搜索引擎排名</h2>
    <ol>
        <li><Strong>Gogle</Strong></li>
        <li><Strong>Baidu</Strong></li>
        <li><Strong>Bing</Strong></li>
        <li><Strong>Songou</Strong></li>
    </ol>

2.无序列表：

    <h2>软件编程语言</h2>
    <ul>
        <li><Strong>Java</Strong></li>
        <li><Strong>C++</Strong></li>
        <li><Strong>Python</Strong></li>
        <li><Strong>JavaScript</Strong></li>
    </ul>

3.自定义列表：

    <h2>健康食品</h2>
    <dl>
        <dt><Strong>水果</Strong></dt>
        <dd><Strong>苹果</Strong></dd>
        <dd><Strong>香蕉</Strong></dd>
        <dt><Strong>蔬菜</Strong></dt>
        <dd><Strong>西兰花</Strong></dd>
        <dd><Strong>菠菜</Strong></dd>
    </dl>

4.效果展示:

5.完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>搜索引擎排名</h2>
    <ol>
        <li><Strong>Gogle</Strong></li>
        <li><Strong>Baidu</Strong></li>
        <li><Strong>Bing</Strong></li>
        <li><Strong>Songou</Strong></li>
    </ol>
    <h2>软件编程语言</h2>
    <ul>
        <li><Strong>Java</Strong></li>
        <li><Strong>C++</Strong></li>
        <li><Strong>Python</Strong></li>
        <li><Strong>JavaScript</Strong></li>
    </ul>
    <h2>健康食品</h2>
    <dl>
        <dt><Strong>水果</Strong></dt>
        <dd><Strong>苹果</Strong></dd>
        <dd><Strong>香蕉</Strong></dd>
        <dt><Strong>蔬菜</Strong></dt>
        <dd><Strong>西兰花</Strong></dd>
        <dd><Strong>菠菜</Strong></dd>
    </dl>
</body>
</html>

二、表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
        <caption><strong>小说排行榜</strong></caption>
        <tr>
            <th><strong>排名</strong></th>
            <th><strong>关键词</strong></th>
            <th><strong>趋势</strong></th>
            <th><strong>今日搜索</strong></th>
            <th><strong>最近七日</strong></th>
            <th><strong>相关链接</strong></th>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="up.jpg"></td>
            <td>365</td>
            <td>3650</td>
            <td><a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E8%B4%B4%E5%90%A7&rsv_spt=1&rsv_iqid=0xf12cff7000115f10&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ih_2&rsv_sug3=1&rsv_sug1=1&rsv_sug7=001&rsv_sug2=1&rsv_btype=i&rsp=2&rsv_sug9=es_2_1&rsv_sug4=2395&rsv_sug=9">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="https://www.baidu.com/">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="up.jpg"></td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>

        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>365</td>
            <td>3650</td>
            <td><a href="#">贴吧</a>&nbsp;<a href="#">图片</a>&nbsp;<a href="#">百科</a></td>
        </tr>
        

    </table>
</body>
</html>

在浏览器中显示效果如下：

三、表单

HTML 表单用于收集用户输入。

from表单：提交数据到服务器

 action:提交服务器的地址，可以跳转页面

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）

 

GET 与POST的区别：

GET:请求参数放在地址栏、get请求安全性没有post高、get请求参数有限制

 POST:将数据封装到formdata中

 

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

例如：

<input type="text"> 定义用于文本输入的单行输入字段：

<input type="radio"> 定义单选按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮

 

type:表单项的类型还有：

            emai:邮箱

            password:密码框

            date:日期选择

            month：月份

            reset:重置按钮

            button:普通按钮

 

个人简历表单制作代码：

1.introduction.html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="introduction.css">
</head>
<body>
    <table border="1" align="center" cellpadding="0">
        <caption><strong>个人简历</strong></caption>
        <tr>
            <td>姓名</td>
            <td><input type="text"></td>
            <td>性别</td>
            <td ><input type="text"></td>
            <td>出生年月</td>
            <td><input type="text"></td>
            <td rowspan="4"><input type="file"></td>
        </tr>

        <tr>
            <td>民族</td>
            <td><input type="text"></td>
            <td>政治面貌</td>
            <td><input type="text"></td>
            <td>身高</td>
            <td><input type="text"></td>
        </tr>

        <tr>
            <td>学制</td>
            <td><input type="text"></td>
            <td>学历</td>
            <td><input type="text"></td>
            <td>户籍</td>
            <td><input type="text"></td>
        </tr>

      

        <tr>
            <td>专业</td>
            <td><input type="text"></td>
            <td colspan="2">毕业学校</td>
            <td colspan="2"><input type="text"></td>
        </tr>

        <tr>
            <td colspan="7"><strong>技能、特长或爱好</strong></td>
        </tr>

        <tr>
            <td>外语等级</td>
            <td colspan="2"><input type="text"></td>
            <td>计算机</td>
            <td colspan="3"><input type="text"></td>
        </tr>

        <tr>
            <td colspan="7">个人履历</td>
        </tr>

        <tr>
            <td>时间</td>
            <td colspan="2">单位</td>
            <td colspan="4">经历</td>
        </tr>

        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"></td>
            <td colspan="4"><input type="text"></td>
        </tr>

        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"></td>
            <td colspan="4"><input type="text"></td>
        </tr>

        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"></td>
            <td colspan="4"><input type="text"></td>
        </tr>

        <tr>
            <td colspan="7">联系方式</td>
        </tr>

        <tr>
            <td>通信地址</td>
            <td colspan="2"><input type="text"></td>
            <td>联系电话</td>
            <td colspan="3"><input type="text"></td>
        </tr>

        <tr>
            <td>E-mial</td>
            <td colspan="2"><input type="text"></td>
            <td>邮编</td>
            <td colspan="3"><input type="text"></td>
        </tr>

        <tr>
            <td colspan="7">自我评价</td>
        </tr>

        <tr>
            <td colspan="7"><textarea></textarea></td>
        </tr>

    </table>
</body>
</html>

2.introduction.css代码：

td{
    border: 1px solid black;
    text-align: center;

}

input,textarea{
    width: 95%;
    height: inherit;
    border: 0px;
}

 3.使用css需要在html中将css  Link 进来

<link rel="stylesheet" href="introduction.css">

4.效果：

 

ljs298443
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页设计软件列表HTML,十种网页设计软件
weixin_42347324的博客
06-07 7422
网页设计所使用的软件因为使用对象、制作内容、网页用途等的不同而有不同的适合的类型，这里我将所简述的十款软件按等级的不同，分初级、中级、高级这样三个等级一一介绍。下面和小编一起来看十种网页设计软件，希望有所帮助！(1)Microsoft FrontPage熟悉Word的用户，在使用FrontPage进行网页设计一定会非常顺手，这是一款与word有许多相似地方的软件。使用FrontPage制作网页，你...
HTML静态网页设计
qq_28891989的博客
05-13 9万+
第一周：HTML写静态网页1.HTML理论介绍及常用格式（1）.HTML主体格式&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt;  &lt;meta charset="utf-8" /&gt;  &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt;   &
HTML网页入门练习——导航栏布局设计
m0_53156691的博客
01-28 2万+
导航栏布局 首先进行页面需求分析，如图所示导航栏分为三部分，包括标志、导航、用户按钮。为了使结构看起来明显，我们使用色块表示，确保结构正确之后再往里面填充内容。 具体步骤如下：
静态网页设计实践（HTML+CSS）
Jcb1906824038的博客
01-10 1143
本文记录了以葫芦娃动画片为主题的静态网页设计实践，基于HTML和CSS前端语言设计编码。
零基础学网页设计之HTML基础教程
u010968930的博客
02-11 2112
什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现..
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 23万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
网页设计（二）——HTML与BOX
m0_55401536的博客
03-20 4505
HTML标签 HTML5简介 DIV与CSS布局入门 认识盒模型 外边距与内边距 边框与CSS布局理念 用CSS定位控制网页布局 position定位 浮动定位 定位层叠 常见布局类型 移动网页设计基础CSS3 边框与背景 文本与多列 转换与过渡 动画与用户界面 HTML标签 HTML是网页制作的...
HTML初识——网页设计html基础
qq_45864756的博客
08-29 4312
html初识
html网页设计课程心得,网页设计教学心得体会
weixin_35698035的博客
06-05 3986
网页设计教学心得体会通过一个学期的学习和课堂讲授，要我体会到要做好一个网页不容易，当然要把这门课程讲好更不容易。首先，需要足够的耐心去了解学生的学习情况；其次，老师要有深厚的功力，即在网页制作领域要能深入市场需求把握市场动向以此来决定教学方向；最后，切合实际的讲学，深入浅出的教学模式能让学生更能把握知识，并能熟练运用。总而言之，要掌握网页设计的基础知识并且成为一名网页设计师也是一个重大挑战！分析现...
WEB入门一 网页设计基础
张晨光老师的播客
02-14 2万+
本章简介 在当今社会，网页是网络信息共享和发布的主要形式。而HTML (Hyper Text Mark-up Language)，即超文本标记语言，是创建网页基础。本章将学习HTML文档的基本结构、组成HTML文档的各类常见标签。HTML 标签可以说明文字、图形、动画、声音、表格和链接等。本章重点是各种标签的基本语法和用法。核心技能部分1.1HTML文档基本结构首先我们来
HTML网页设计新手入门教程（共32课时）
07-22
为CXF服务器端添加自定义拦截器进行权限检查【】HTML网页设计教程第一章（概论）1【】HTML网页设计教程第一章（概论）2【】HTML网页设计教程第一章（概论）3【】HTML网页设计教程第一章（概论）4【】HTML网页设计...
HTML+CSS网页设计与布局从入门到精通
03-18
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
HTML网页设计语言入门基础教学视频
06-09
本课程为软件相关专业网页设计入门基础课程，课程共18讲，上课代码及PPT课件已经上传，可以直接下载使用。主要课程内容如下：1.讲解HTML基本概念，HTML的基本结构；2.讲解表格与超级链接标签的使用方法；3.讲解字体...
HTML入门教程 网页设计
06-15
不错的教程~~~~~~~~··网页设计~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~````
网页设计-入门级个人网站
11-02
2.网页设计课程的期末设计，包括课程实验报告和网站源代码； 3.网站内容主要是个人相关，包括首页、我的家乡、朋友圈、大学规划、个人相册等五个部分，共14个页面；【注意，因为内容涉及个人隐私，所以做了部分更改...
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
weixin_42283461的博客
06-10 1180
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
HTML初体验
最新发布
linux423的博客
06-14 437
可参考jd.com官网，ctrl+u查看当前页面源代码找到你的项目，在项目中创建html类型的网页文件标准的HTML正确书写格式效果如下。
html实现粘贴excel数据，在页面表格中复制
weixin_43805439的博客
06-13 452
Html table 实现Excel多格粘贴
HTML跨年烟花
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~
html网页设计从入门到精通
07-14
### 回答1： HTML网页设计是一项广泛应用于创建网页的技能，它从入门到精通需要一定的学习和实践。下面是一个简单的学习路径，帮助你逐步进阶。 入门阶段： 1. 学习基本HTML标记语言：了解HTML的基本结构、标签的作用和语法。 2. 理解HTML元素和属性：学习常用的HTML元素和属性，如标题、段落、链接等，以及它们的用法和属性设置。 3. 掌握文本格式化和排版：学会使用HTML标签对文本进行格式化和排版，如加粗、斜体、居中等。 进阶阶段： 1. 学习HTML表单：了解表单元素的使用和属性设置，学会创建各种表单元素并实现表单验证。 2. 掌握CSS样式：学习如何使用CSS来美化网页，包括字体、颜色、背景、布局等，提升网页的视觉效果。 3. 学习响应式设计：了解如何使用媒体查询和流体网格布局使网页适应不同设备和屏幕尺寸。 4. 学习JavaScript交互：了解JavaScript的基本语法和常用功能，使用JavaScript实现网页的动态交互效果。 精通阶段： 1. 学习HTML5新特性：了解HTML5的新元素、新API和多媒体支持等，使网页更加丰富和功能强大。 2. 学习CSS高级技术：深入了解CSS的高级特性如动画、过渡、变形等，实现更复杂和炫酷的效果。 3. 学习前端框架：了解并使用流行的前端框架，如Bootstrap、Vue.js等，提高开发效率和代码质量。 4. 学习优化和性能调优：了解网页性能优化技巧，如文件压缩、懒加载、缓存等，优化网页加载速度和用户体验。 要成为HTML网页设计的专家，除了课堂学习和实践外，还需要不断关注行业动态和新技术，积极参与项目实践，才能不断提升自己的能力。 ### 回答2： HTML网页设计从入门到精通需要经历一系列的学习和实践。首先，入门阶段，我们需要了解HTML的基础知识，学习HTML标签及其属性的用法，理解HTML文档的结构和语义。 在入门阶段之后，需要进一步掌握CSS样式和布局。了解如何通过CSS来美化网页，掌握常用的CSS属性和选择器的用法，学会使用CSS实现网页布局和响应式设计。 接下来，需要掌握一些前端框架和库，如Bootstrap和jQuery等。这些工具可以大大简化网页设计的过程，提供快速的响应式布局和交互效果。 同时，网页设计也需要考虑到网页的可访问性和SEO优化。学习如何设计无障碍的网页，合理使用标签和属性以提高网页的可访问性。了解SEO优化原则，优化网页的标题、关键字、描述等元素，提高网页在搜索引擎中的排名。 此外，学习如何调试和优化网页性能也是进阶的关键。了解常见的网页性能优化技巧，如减少HTTP请求、压缩文件大小、使用缓存等，以提高网页的加载速度和响应性能。 最后，不断实践和练习是提高网页设计技能的关键。通过实际的项目经验，不断改进和完善自己的设计能力，才能逐渐达到精通HTML网页设计的水平。 总结起来，HTML网页设计从入门到精通需要掌握HTML基础知识、CSS样式和布局、前端框架和库的使用、网页的可访问性和SEO优化、网页性能优化等多个方面的知识和技能。通过不断学习和实践，我们可以逐步提高自己的设计水平，最终达到精通的程度。 ### 回答3： HTML网页设计是制作网页的基础，学习和掌握HTML网页设计需要一定的时间和努力。下面是从入门到精通HTML网页设计的步骤： 入门阶段： 1. 在入门阶段，了解HTML的基本概念和语法是必不可少的。可以通过在线教程或者书籍学习HTML的基础知识。 2. 学习HTML的标签和属性，掌握常用的HTML标签如<div>、<p>、<img>等等，并学会使用属性来为标签添加样式和功能。 3. 熟悉HTML的文本格式化标签，如<strong>、<em>、<h1>等等，可以用来设置文本的样式和重要性。 4. 学习如何创建超链接和图像嵌入，了解<a>和<img>标签的使用方法，掌握超链接和图像的添加和跳转功能。 进阶阶段： 1. 学习使用HTML表单元素，如<input>、<textarea>、<select>等等，了解表单的构建和提交过程。 2. 掌握HTML的列表标签，如<ul>、<ol>、<li>，可以用于创建有序列表和无序列表。 3. 学习如何使用HTML的表格标签，如<table>、<tr>、<td>等等，可以用于创建数据的展示和排列。 4. 熟悉使用HTML的框架和Iframe标签，可以将网页分割成多个部分或者嵌入其他网页。 精通阶段： 1. 学习和掌握HTML5的新特性，如语义化标签、音频视频播放等，能够使用HTML5进行更加丰富多样的网页设计。 2. 掌握CSS样式表的使用，可以为HTML网页添加样式和布局，提高网页的美观性和可读性。 3. 学习响应式设计和移动优先的网页开发方法，使网页在不同终端上都能有良好的体验。 4. 学习和使用JavaScript等脚本语言，为网页添加交互性和动态效果。 通过逐步学习和实践，从入门到精通HTML网页设计需要不断积累经验和掌握新的技术，同时也需要不断关注行业的发展和新的设计趋势。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值