1.HTML和CSS HTML介绍

最新推荐文章于 2022-05-09 16:53:30 发布
最新推荐文章于 2022-05-09 16:53:30 发布
阅读量545 收藏 1
点赞数 1
分类专栏： JavaWeb 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59376721/article/details/122513282
版权

文章目录

1.网页是由三部分组成

1）内容（结构）： 在页面看到的数据。一般内容使用html来展示。
2）表现： 在页面的展现形式，如布局、颜色、大小。一般使用CSS实现。
3）行为： 页面中元素与输入设备交互的响应。一般使用javascript实现。

2.HTML的书写规范

<!DOCTYPE html><!--约束，声明-->
<html lang="en"><!--html标签表示html的开始，lang=""zh_CN表示中文，lang="en"表示英文,html标签分为两部分，分别是：head和body-->
<head><!--表示头部信息，一般包含三部分，title标签，css样式,js代码-->
    <meta charset="UTF-8"><!--表示单前页面使用UTF-8字符集-->
    <title>星辰</title><!--表示标题-->
</head>
<body><!--body标签是整个html页面显示的主体内容-->
    hello
</body>
</html>

3.HTML的标签介绍

3.1字体标签（font）

1）font标签是字体标签，它可以用来修改文本的字体，颜色，大小（尺寸）

color属性修改颜色
face属性修改字体
size属性修改文本大小（1~7）

2）需求： 在网页上显示 我是标签，并修改字体为 宋体，颜色为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.font标签</title>
</head>
<body>
    <font color="red" size="7" face="宋体"> 我是字体标签</font>
</body>
</html>

3.2特殊字符

1）常用的特殊字符：

大于号：&lt ;
小于号：&gt ;
空格：&nbsp ;

2）需求： 把< br > 换行标签变成文本转换成字符显示在页面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.特殊字符</title>
</head>
<body>
    我是&lt;br&gt;标签
</body>
</html>

3.3标题标签（h1-h6）

1)h1-h6都是标题标签，h1最大，h6最小。
2）align 属性数对齐属性。

left：左对齐（默认）
center：居中
right：右对齐

3）需求：演示标题1到标题6。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.标题标签</title>
</head>
<body>
    <h1 align="left">标题一</h1>
    <h2 align="center">标题二</h2>
    <h3 align="right">标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>
</body>
</html>

3.4超链接标签（a）

1）href属性设置链接的地址
2）target属性设置哪个目标进行跳转

_self：表示当前页面（默认）
_blank：表示打开新的页面进行跳转

3）需求：跳转到百度页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.超链接标签</title>
</head>
<body>
    <a href="http://baidu.com" taget="_self">百度</a>
    <a href="http://baidu.com" target="_blank">百度</a>
</body>
</html>

3.5无序列表和有序列表（ul和ol）

1）ul是无序列表，ol是有序列表

type属性可以修改列表项前面的符号

2）li是列表项
3）需求：使用无序列表方式把甘雨，刻晴，胡桃展示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.列表</title>
</head>
<body>
   <ul type="none">
       <li>刻晴</li>
       <li>甘雨</li>
       <li>胡桃</li>
   </ul>

    <ol>
        <li>刻晴</li>
        <li>甘雨</li>
        <li>胡桃</li>
    </ol>
</body>
</html>

3.6图片标签（img）

1）img是图片标签，用来显示图片

src属性可以设置图片路径
width属性表示图片宽度
heigth属性表示图片长度
border属性表示增加黑边框

2）在javaSE中路径也分为相对路径和绝对路径。

相对路径：从工程名开始算
绝对路径：盘符:/目录/文件名

3）在javaWEB路径分为相对路径和绝对路径。

相对路径：
. ：表示当前文件所在的目录。
…：表示当前文件所在的上一级目录。
文件名：表示当前文件所在目录的文件，相当于./文件（./可以省略）

绝对路径：http://ip:port/工程名/资源路径

4）需求：将imgs中的图片显示在网页上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.图片标签</title>
</head>
<body>
   <img src="../imgs/1.jpeg" width="1000" height="2000"/>
   <img src="../imgs/2.jpg"/>
   <img src="../imgs/3.jpg"/>
   <img src="../imgs/4.jpg"/>
   <img src="../imgs/5.jpg"/>
   <img src="../imgs/6.jpg"/>
   <img src="../imgs/7.jpg"/>
</body>
</html>

3.7表格标签（table）

1）table标签是表格标签

border属性设置表格标签
width属性设置表格宽度
length属性设置表格高度
align属性设置表格相对于页面的对齐方式
cellspacing属性设置单元格间距

2）tr是行标签
3）th是表头标签
4）td是单元格标签

align属性设置单元格文本对齐方式
colspan属性设置跨列
rowspan属性设置跨行

5）b是加粗标签
6）需求1：做一个带表头的，三行，三列的表格，并显示边框。
需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.单元格标签</title>
</head>
<body>
   <table border="1" width="200" length="200" align="center" cellspacing="0">
       <tr>
           <td align="center"><b>1.1</b></td>
           <th>1.2</th>
           <th>1.3</th>
       </tr>
       <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
       </tr>
       <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
       </tr>
   </table>
</body>
</html>

7）需求3：新建一个五行，五列的表格。第一行第一列的单元格要跨两列。
第二行第二列的单元格跨两行。第四行第一列的单元格跨两行两列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.单元格标签</title>
</head>
<body>
   <table align="left" border="1" width="200" length="200" cellspacing="0" >
       <tr>
           <td colspan="2">1.1</td>
           <td>1.2</td>
           <td>1.3</td>
           <td>1.4</td>
       </tr>
       <tr>
           <td rowspan="2">2.1</td>
           <td>2.2</td>
           <td>2.3</td>
           <td>2.4</td>
           <td>2.5</td>
       </tr>
       <tr>
           <td>3.1</td>
           <td>3.2</td>
           <td>3.3</td>
           <td>3.4</td>
       </tr>
       <tr>
           <td>4.1</td>
           <td>4.2</td>
           <td>4.3</td>
           <td colspan="2" rowspan="2">4.4</td>
       </tr>
       <tr>
           <td>5.1</td>
           <td>5.2</td>
           <td>5.3</td>
       </tr>
   </table>
</body>
</html>

3.8页面内置窗口标签（iframe）

1）iframe标签可以在页面上开辟一个小区域显示一个单独的页面

width属性表示窗口的宽度
heigth属性表示窗口的长度
name属性表示窗口名称

2）iframe和a标签组合使用的步骤：

①在iframe标签中使用name属性定义一个名称
②在a标签的target属性上设置iframe的name属性值

3）需求：在一个页面上开辟一个小区域显示一个单独的页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.iframe标签</title>
</head>
<body>
    <iframe src="../imgs/7.jpg" width="300" height="300" name="abc"></iframe>
    <br/>
    <ul>
        <li><a href="http://baidu.com" target="abc">1.百度</a></li>
        <li><a href="http://bilibili.com" target="abc">2.哔哩哔哩</a></li>
        <li><a href="http://qq.com" target="abc">3.QQ</a></li>
    </ul>
</body>
</html>

3.9表单显示（form）

1）form标签就是表单
2）input type=text 是文件输入框，value设置默认显示内容

3）input type=password 是密码输入框，value设置默认显示内容

4）input type=radio 是单选框，name属性可以对其进行分组，checked="checked"表示默认选中

5）input type=checkbox 是复选框
checked="checked"表示默认选中

6）input type=reset 是重置按钮，value属性修改按钮上的文本

7）input type=submit 是提交按钮，value属性修改按钮上的文本

8）input type=button 是按钮，value属性修改按钮上的文本

9）nput type=file 是文件上传域

10）input type=hidden 是隐藏域
当我们要发送某些消息，而这些消息，不需要用户参与，就可以使用隐藏域（提交的同时会发送给服务器）

11）select标签是下拉框，option标签是下拉列表中的选项
selected="selected"设置默认选中

12）textarea表示多行文本输入框（起始标签和结束标签的内容是默认值）

rows属性设置可以显示多行的高度
cols属性设置每行可以显示几个字符宽度

13）需求：创建一个个人信息注册的表单界面，包含用户名，密码，确认密码，性别（单选），兴趣爱好（多选），国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9.表单显示</title>
</head>
<body>
    <form>
        用户名：<input type="text" value=""/><br/>
        密码：<input type="password" value=""/><br/>
        确认密码：<input type="password" value=""/><br/>
        性别：<input type="radio" name="sex"/>男
            <input type="radio" name="sex"/>女<br/>
        兴趣爱好：<input type="checkbox"/>游戏
            <input type="checkbox"/>电影
            <input type="checkbox"/>旅游<br/>
        国籍：<select>
                <option>请输入国籍----</option>
                <option>中国</option>
                <option>美国</option>
                <option>俄罗斯</option>
                <option>英国</option>
                <option>法国</option>
            </select><br/>
        自我评价：<textarea rows="10",cols="10"></textarea><br/>
        <input type="reset"/>
        <input type="submit"/><br/>
        <input type="hidden"/>
    </form>
</body>
</html>

14）表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.iframe标签</title>
</head>
<body>
    <h1 align="center">用户注册</h1>
    <form>
        <table align="center">
            <tr>
                <td>用户名：</td>
                <td><input type="text" value=""/></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" value=""/></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" value=""/></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="sex"/>男
                    <input type="radio" name="sex"/>女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td><input type="checkbox"/>游戏
                    <input type="checkbox"/>电影
                    <input type="checkbox"/>旅游</td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td><select>
                    <option>请输入国籍----</option>
                    <option>中国</option>
                    <option>美国</option>
                    <option>俄罗斯</option>
                    <option>英国</option>
                    <option>法国</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td><textarea rows="10",cols="10"></textarea></td>
            </tr>
            <tr>
                <td><input type="reset"/></td>
                <td align="center"><input type="submit" /></td>
                <td><input type="hidden"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

3.10表单提交的细节

1）form是表单标签

action属性设置提交的服务器的地址
method属性设置提交的方式get（默认值）或post

2）表单提交的时候，数据没有发送给服务器的三种情况：

1.表单项没有name属性值
2.单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3.表单项不在提交的form标签中

3）get请求的特点：

1.浏览器地址栏中的地址是：action属性[+?+请求参数]
请求参数的格式：name=value&name=value
2.不安全
3.它有数据长度的限制

4）post请求的特点：

1.浏览器地址栏中只有action属性值
2.相对于get请求要安全
3.理论上没有数据长度的限制

5）需求：点击登入会跳转到其他页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.iframe标签</title>
</head>
<body>
    <h1 align="center">用户登入</h1>
    <form action="http://bilibili.com" method="post">
        <input type="hidden" name="action" value="login"/>
        <table align="center">
            <tr>
                <td>用户名：</td>
                <td><input type="text" value=""/></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" value=""/></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" name="sex" value="boy"/>男
                    <input type="radio" name="sex" value="girl"/>女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td><input name="hobby" type="checkbox" value="游戏"/>游戏
                    <input name="hobby" type="checkbox" value="电影"/>电影
                    <input name="hobby" type="checkbox" value="旅游"/>旅游</td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td><select name="country">
                    <option>请输入国籍----</option>
                    <option>中国</option>
                    <option>美国</option>
                    <option>俄罗斯</option>
                    <option>英国</option>
                    <option>法国</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><input type="reset"/></td>
                <td align="center"><input type="submit" value="登入"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

3.11其他标签（处理文本文字：div、span、p）

1）div标签：默认独占一行。
3）span标签：它的长度是封装数据的长度。
3）p标签：段落标签，默认会在段落的上方和下方空出一行来（如果已有就不再空出）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.iframe标签</title>
</head>
<body>
    <div>标签一</div>
    <div>标签二</div>
    <span>标签三</span>
    <span>标签四</span>
    <p>标签五</p>
    <p>标签六</p>
    1
</body>
</html>
一点点星辰
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1.html+css学习笔记
05-20
html+css学习笔记
html页面显示list，生成下拉列表
wanglj7525的专栏
06-26 9063
HTML页面代码 %{ number = 0; }%#{list items:user,as:'user'}%{++number;}% ${user?.userName} #{/list} 数据查询，使用play框架 public static void bindUkey(){ List user = JbUkeyInfo.find("level >
input标签的type属性汇总
热门推荐
夏天的博客
04-20 9万+
1.单行输入框< input type=“text”/> 单行文本输入框常用来输入简短的信息，如用户名、账号等，常用的属性有name、value、 maxlength。 2.密码输入框< input type=" password"/> 密码输入框用来输入密码，其内容将以圆点的形式显示。 3.单选按钮< input type=" radio"/> 单选按钮用于单项选择，如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“
html list模版,list.html
weixin_42521731的博客
06-27 1472
欢迎页面-X-admin2.2首页演示导航元素onclick="location.reload()" title="刷新">IDID用户名邮箱性别城市积分学校 获取选中行数据获取选中数目 验证是否全选10003 ? 'checked': ''}} >layui.use('laydate',function () {var laydate = layui.laydate;//执行一个l...
HTML表单
Haolijuan_123的博客
04-17 1498
表单 一、表单的作用 1、使用表单的目的是为了收集用户信息。 2、在网页中，如果我们需要跟用户交互，收集用户资料，此时就需要表单。 二、表单元素书写方式 下面展示一些 内联代码片。 <input type="属性值" value="你好" /> 1、input 输入的意思 2、<input / >标签为单标签 3、type属性设置不同的属性值用来指定不同的控件类型 4、除了type属性还有别的属性 ` 三、表单的active属性和method属性是什么 1、收集的用户信息怎么传递给
html页面创建listview,DEDE更新栏目HTML取消生成list_x_1.html,用index.html代替第一页
weixin_34050521的博客
06-04 606
dedecms 现在更新栏目HTML后生成的 index.html 与list_x_1.html内容相同重复，在seo来说是造成重复内容或URL规范化的问题，列表页首页和第一页重复,不利于seo。dede列表首页与列表第一页内容完全一样，DEDE列表页分页如何取消生成第一页，第一页用index.html默认页代替，即让列表第一页为index.html，以后为list_x_2.htmllist_x...
bootstrap.min.css
03-21
bootstrap.min.css
HTML和CSS学习.zip
最新发布
01-01
HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习...
html和 css 学习.zip
01-01
html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习html和 css 学习html和 css 学习html和 css 学习 html和 css 学习...
html和css阶段学习.zip
01-01
html和css阶段学习html和css阶段学习html和css阶段学习html和css阶段学习 html和css阶段学习html和css阶段学习html和css阶段学习html和css阶段学习 html和css阶段学习html和css阶段学习html和css阶段学习html和css...
Html与Css的简单介绍（一）
xy25408的博客
08-04 1326
1. HTML与CSS 1.1 HTML ​ HTML是一种超文本标记语言，用于告诉浏览器如何构造页面，“超文本”指的是构造的页面可以包含图片、链接、音乐以及程序等非文字元素，HTML文件的后缀名有.html与.htm，大部分都是.html。 1.2 HTML特点 ​ 1.简易性：超文本标记语言版本升级采用超集方式，因此更加灵活方便。 ​ 2.可扩展性：超文本标记语言的广泛应用带来了加强功能、增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。 ​ 3.平台无关性：超文本标记语言可
JavaWeb『HTML&&CSS』
不会敲代码的z的博客
05-09 1207
前言：参考于尚硅谷的javaweb的HTML&&CSS笔记，复习专用 第一节 HTML简介 1、名词解释 HTML是Hyper Text Markup Language的缩写。意思是**『超文本标记语言』**。 html语言是解释型语言，不是编译型。浏览器是容错的 2、超文本 HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文
HTML与CSS详细介绍
weixin_44454512的博客
11-28 1万+
HTML 与 CSS 1. 主要内容 2. HTML HTML（HyperText Markup Language）就是超⽂本标记语⾔。"超⽂本"就是表示⻚⾯内可以包含⾮⽂字元素，如：图⽚、链接、⾳乐等等。 它是⼀种建⽴⽹⻚⽂件的语⾔，通过标记式的指令（Tag），将影像、声⾳、图⽚、⽂字等链接显示出来。这种标记性语⾔是因特⽹上⽹⻚的主要语⾔。 HTML ⽹⻚⽂件可以使⽤记事本、写字板、HBuilder、Sublime 等编辑⼯具来编写，以 .htm 或 .html 为⽂件后缀名保存。将 HTML ⽹⻚⽂件
HTML 和 CSS 简述
郭帅的博客
06-16 284
html概述HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
＜input type=“file“＞ file属性
浅灰色、邂逅的博客
07-21 3万+
使用type="file"的<input>元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的File API对文件进行操作。 Value ADOMString表示已选择文件的路径 事件 change和input 支持的公共属性 required 附加属性 accept,capture,files,multiple IDL 属性 files和valu...
HTML和CSS简介
qq_30505673的博客
09-18 1万+
Html指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了, 即HTML5。通过仔细观察网页源代码我们可以知道: 制作网页的语言是用 “&amp;amp;amp;lt;” “&amp;amp;amp;gt;” 括起来的. 有些是成对出现,有些不是 -----&amp;amp;amp;gt; 我们一般称这样用尖括号括起来的语言为 HTML ，它是 H...
input type="file"使用
weixin_34162629的博客
03-17 456
问题： 在实际开发过程中，会遇到上传文件的一些需求。但是使用原生的<input type="file" />在使用中存在一些问题 在未上传文件时，显示"no file choosen"，用户界面不友好，不可配置 上传同一个文件，不会触发change事件，即使该文件做过修改 用户如果在上传过程中点击了“取消”，已经上传的文件会...
input type=‘file’方法
weixin_44156701的博客
02-22 501
使用input：file标签, 去调用系统默认相机，摄像，录音功能，使用capture属性，直接说明需要调用什么功能 capture表示，可以捕获到系统默认的设备，比如：camera–照相机；camcorder–摄像机；microphone–录音。 accept表示，直接打开系统文件目录。 转载：SoftBlue的博客 ...
html typefile 样式,type="file"的input框样式修改的方法
weixin_42393576的博客
06-19 793
关于type="file"的input是啥？这个是啥我觉得没必要再说了，反正大家都知道，然后在现在有各种手机的时代，还可以通过直接拍照的方式来上传，反正比以前好玩多了。上传按钮的样式调整玩过CSS的人朋友都知道，在HTML元素中，表单控件元素的样式修改是最痛苦的，很多控件的样式是跟着系统主题来改变的，想要去修改的话，只能模拟来实现，尤其尤其是在IE浏览器中。对于type="file"这个上传按钮，...
HTML 和css 介绍
04-14
HTML（Hyper Text Markup Language）是一种用于创建网页的标准标记语言，它描述了网页的结构和内容。CSS（Cascading Style Sheets）是一种用于控制网页外观样式的语言，它可以让网页的排版更加美观和易于阅读。HTML和CSS通常一起使用，HTML用于定义网页的结构和内容，CSS用于控制网页的样式和布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值