html -day1

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>

其他标签
世人皆负我,举世皆可杀 匹夫无罪,怀璧其罪
世人皆负我,举世皆可杀 匹夫无罪,怀璧其罪

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

```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值