html -day1

最新推荐文章于 2025-07-23 09:35:45 发布

henrik@

最新推荐文章于 2025-07-23 09:35:45 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

分类专栏： html css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/luolvxing/article/details/116945885

html css 专栏收录该内容

2 篇文章

订阅专栏

day1

HTML CSS

HTML—设计框架和内容 CSS—设计样式

C/S–客服端/服务器 B/S—浏览器/服务器

前端开发—页面开发：

UI-设计网页样式

前端工程师–设计静态网页（HTML、CSS、javascript）

java程序员–将静态网页修改为动态网页

网页组成部分—内容（结构）、样式/表现、行为（页面元素与输入设备交互的响应）

HTML

超为文本标记语言—hyper text makup language

创建HTML文件：

1.创建一个web工程，在工程下创建HTML页面

new–project–static web–finash–project name—创建HTML页面

2.HTML页面结构

<!DOCTYOE html><!-- 声明约束-->
<html lang="zh_CN"><!--html标签代表HTML的开始， lang="zh_cn"代表中文,在HTML中一般有两部分，一是head而是body-->
    <head><!-- 头部信息，一般包括三个部分，title标签，CSS样式，JS代码脚本-->
        <title>标题</title><!--设置标题 -->
        <meta charset="UTF-8"><!--表示当前页面使用UTF-8字符集 -->
    </head>
    <body>
        包含HTML的主体内容   
    </body>
</html>

3、HTML的标签

标签：

块标签
自结束标签/单标签
标签不能交叉嵌套----但浏览器会自动修复部分错误

正确：
```
      ```
```

早安，小陆

```

错误：

<div><span>早安，小陆</div></span>

标签必须正确的关闭/闭合，即结束标签，单标签也必须在后面加/ 如
```
<br/>
```
属性必须有属性值，同时不能缺少双引号

标签属性：

（1）基本属性 —设置或修改一些基本的样式

（2）事件属性–设置事件响应后的代码

<!DOCTYPE html><!--声明-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body bgcolor="white">
hello world
<br><!-- 换行-->
<hr><!-- 水平线-->
<!-- 标签属性：
（1）基本属性  ---设置或修改一些基本的样式
（2）事件属性--设置事件响应后的代码
标签：W3school.com.cn
-->
<p onclick="alert('hello')">单击</p><!--段落-->
<!-- font字体标签 color修改颜色 size设置字号 face设置字体-->
<font color="red" face="宋体" size="6">设置字体</font>
<!--
特殊字符 的使用，用字符实体表示
常用特殊字符：
空格---&nbsp;
-->
i am    from china<br/>
i am&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp from china<br/>
<!-- 标题标签<hn>n从1-6，数字越大，字号越小，默认是左对齐-->
<h6 >标题6</h6>
<h6 align="right">标题6</h6>
<h6 align="center">标题6</h6>
<!-- 超链接-->
<a href="http://www.baidu.com">百度</a>
<br/>
<!-- 在新窗口打开链接 target属性 _self在当前页面跳转_blank在新窗口打开，默认为当前窗口-->
<a href="https://w3school.com.cn" target="-blank">W3C</a>
<!-- 列表标签ul无序列表,ol 有序列表 type设置列表前面的符号none取消，-->
<ul type="none">
    <li>姓名</li>
    <li>年龄</li>
</ul>
<ol>
    <li>test1</li>
    <li>test2</li>
</ol>
<!--
img标签用于显示图片 路径分为相对路径和绝对路径
相对路径--相对于当前目录的路径./可以省略
绝对路径---http://ip:port/工程名/资源路径
在web中绝对路径不能用盘符:/目录/文件名
width设置图片宽度，height设置图片高度  border为图片设置边框，单位像素--一般设置为1  alt--设置当指定路径找不到时，用来代替显示的文本内容
-->
<img width="100" height="100" src="https://img0.baidu.com/it/u=1269735713,3500557622&fm=26&fmt=auto&gp=0.jpg"/>
<!--
table 表格标签  单元格间距cellspacing
表格跨行跨列
-->
<table align="center" border="1" width="200" height="200" cellspacing="0">
    <tr><!--行标签，一行    b标签是加粗标签 -->
        <td align="center"><b>单元格</b></td>
        <th>表头标签</th>
        <td>单元格标签</td>
    </tr>
    <tr>
        <!-- 跨行跨列跨列colspan,跨行rowspan-->
        <td colspan="2">单元格</td>

        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>
<!--iframe标签，在HTML中iframe必须用双标签在HTML页面上打开一个窗口去加载一个单独页面 -->
<iframe src="html2.html" width="500" height="200" name="hh"></iframe>
<br>
<!--iframe和a标签组合使用：1、在iframe中使用name属性定义一个名称，在a标签中使用target上设置iframe的name属性值 -->
<a href="./html2.html" target="hh">跳转到html2.html</a>
<p>段落测试</p>
<!--表单标签用来收集用户信息的所有元素的集合 -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
</head>
<body>
测试<br>
<img src="https://img2.baidu.com/it/u=3282188054,420167424&fm=26&fmt=auto&gp=0.jpg" width="200" height="200"/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单格式化</title>
</head>
<body>
表单的格式化，使页面更完美。将表单放在表格中展示
<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <!--行标签 -->
        <tr>
            <td>用户名称：</td>
            <td><input type="text"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex"/>男
                <input type="radio" checked="checked" name="sex"/>女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox"/>java
                <input type="checkbox"/>c++
                <input type="checkbox"/>JavaWeb
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td> <select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>日本</option>
            </select></td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td>
                <textarea rows="4" cols="10">默认值</textarea>
            </td>
        </tr>
        <tr>
            <td> <input type="submit"/></td>
            <td><input type="reset" /></td>
        </tr>
    </table>
    用户名称：<input type="text"/><br/>
    用户密码：<input type="password"/><br/>
    性别：<input type="radio" name="sex"/>男<input type="radio" checked="checked" name="sex"/>女<br/>
    兴趣爱好：<input type="checkbox"/>java<input type="checkbox"/>c++<input type="checkbox"/>JavaWeb<br/>
    国籍：
    <select>
        <option>--请选择国籍--</option>
        <option selected="selected">中国</option>
        <option>美国</option>
        <option>日本</option>
    </select>
    <br/>
    自我评价：<textarea rows="4" cols="10">默认值</textarea><br/>
    <input type="reset"/><br/>
    <input type="submit"/><br/>
    <input type="button" value="按钮"/><br/>
    <input type="file" /><br/>
    <input type="hidden">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交细节</title>
</head>
<body>
<!--
form表单标签，两个重要属性，
一是action属性--设置提交的服务器地址
二是method属性--设置提交的方法，方法get(默认值），post方法

http://localhost:8090/--服务器地址
?分隔符
action=login 请求参数/表单信息
表单提交时数据没有发送给服务器的原因：
1-表单项没有name属性值
2-单选，复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3--表单项不在提交的form标签中
提交方法：
get：浏览器地址栏中是浏览器地址+？+请求参数，参数格式是name=value用&连接
     不安全，应为在地址栏可以看到参数
     有数据长度的限制若表单值超过一定能限度需要用post
post：浏览器地址栏中只有action的属性值，即服务器地址，相对安全，没有数据长度的限制
 -->
<form action="http://localhost:8090" method="post">

    <input type="hidden" name="action" value="login"/><br>

    <h1 align="center">用户注册</h1>
    <table align="center">
        <!--行标签 -->
        <tr>
            <td>用户名称：</td>
            <td><input name="name" type="text"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input name="password" type="password"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="boy"/>男
                <input type="radio" checked="checked" name="sex" value="girl"/>女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" name="interest" value="java"/>java
                <input type="checkbox"/>c++
                <input type="checkbox"/>JavaWeb
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td> <select name="国籍">
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>日本</option>
            </select></td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td>
                <textarea rows="4" cols="10">默认值</textarea>
            </td>
        </tr>
        <tr>
            <td> <input type="submit"/></td>
            <td><input type="reset" /></td>
        </tr>
    </table>
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他标签</title>
</head>
<body>
<!--div标签 ,默认独占一行-->
<div>
    世人皆负我，举世皆可杀
    匹夫无罪，怀璧其罪
</div>
<!--span标签 ，标签内文字有多长，标签就有多长，即长度是封装数据的长度-->
<span>
     世人皆负我，举世皆可杀
    匹夫无罪，怀璧其罪
</span>
<!--p标签段落标签，默认会在段落的上方和下方空出一行 -->
<p>
    世人皆负我，举世皆可杀
    匹夫无罪，怀璧其罪
</p>
</body>
</html>

html>

其他标签

世人皆负我，举世皆可杀匹夫无罪，怀璧其罪

```