html学习

目录

  • 1. html新建
    • 1.1 html基本结构
    • 1.2 html细节
  • 2. 标签
    • 2.1 font标签
    • 2.2 字符实体
    • 2.3 标题标签
    • 2.4 超链接标签
    • 2.5 列表标签
    • 2.6 图片标签
    • 2.7 表格标签
    • 2.8 表单标签
      • 2.8.1基本使用
      • 2.8.2表单综合练习
      • 2.8.3表单格式化
      • 2.8.4表单使用细节
      • 2.8.5get请求
      • 2.8.6post请求
    • 2.9 其它标签
      • 2.9.1div标签
      • 2.9.2段落标签
      • 2.9.3span标签
  • 3. 课后作业
    • 3.1 作业1
    • 3.2 作业2

1. html新建

html学习_第1张图片

1.1 html基本结构

html学习_第2张图片

1.2 html细节

html学习_第3张图片

2. 标签

2.1 font标签

html学习_第4张图片

2.2 字符实体

html学习_第5张图片

2.3 标题标签

html学习_第6张图片

2.4 超链接标签

html学习_第7张图片

2.5 列表标签

  • 无序列表
    html学习_第8张图片
  • 有序列表
    html学习_第9张图片

2.6 图片标签

html学习_第10张图片
html学习_第11张图片

2.7 表格标签

  • 基本使用
    html学习_第12张图片
  • 用合并的方式打印一个菜谱
    html学习_第13张图片
    思路:
    1.先把整个表格的完整的行和列,展示出来5*3
    2.再使用合并的技术,进行合并
    html学习_第14张图片

2.8 表单标签

2.8.1基本使用

html学习_第15张图片

2.8.2表单综合练习

html学习_第16张图片

2.8.3表单格式化

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格格式化title>
head>
<body>
<form action="ol_li.html" method="get">
    <table align="center" width="600px">
        <tr>
            <th colspan="2"><h1>用户注册信息h1>th>
        tr>
        <tr>
            <td>用户名称:td>
            <td><input type="text" name="username">td>
        tr>
        <tr>
            <td>用户密码:td>
            <td><input type="password" name="password">td>
        tr>
        <tr>
            <td>确认密码:td>
            <td><input type="password" name="password">td>
        tr>
        <tr>
            <td>喜欢的运动项目td>
            <td><input type="checkbox" name="sport" value="basketball" checked>篮球
                <input type="checkbox" name="sport" value="soccer">足球
                <input type="checkbox" name="sport" value="ping pang">乒乓球
            td>
        tr>
        <tr>
            <td>性别td>
            <td><input type="radio" name="sex" value="male" checked><input type="radio" name="sex" value="female">td>
        tr>
        <tr>
            <td>喜欢的城市td>
            <td><select name="city">
                <option>--选择--option>
                <option value="beijing">北京option>
                <option value="shanghai">上海option>
            select>td>
        tr>
        <tr>
            <td>自我介绍td>
            <td><textarea rows="6" cols="20">textarea>td>
        tr>
        <tr>
            <td>选择你的文件(头像)td>
            <td><input type="file" name="myfile">td>
        tr>
        <tr>
            <td><input type="submit" value="提交啦"/>td>
            <td><input type="reset" value="重置"/>td>
        tr>
    table>
form>
body>
html>

2.8.4表单使用细节

html学习_第17张图片

2.8.5get请求

  1. 浏览器地址栏中的地址是: action属性[+ ? + 请求参数]
    请求参数的格式是: name=value&name=value&name=value
    示例: http://localhost:63342/html/ol_li.html?username=978964140%40qq.com&password=123&password=123&sport=basketball&sport=soccer&sex=male&city=beijing&myfile=4.wav
  2. 不安全;
  3. 它有数据长度的限制(不同的浏览器规定不一样, 一般2K)

2.8.6post请求

  1. 浏览器地址栏中的地址只有action属性值,提交的数据是携带在http请求中,但是不会展示在地址栏, 示例: http://localhost:63342/html/ol_li.html
  2. 它真正发送的内容在请求头,抓包之后如下所示:
    html学习_第18张图片
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.7
    Accept-Encoding: gzip, deflate, br
    Accept-Language: ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
    Cache-Control: max-age=0
    Connection: keep-alive
    Content-Length: 129
    Content-Type: application/x-www-form-urlencoded
    Cookie: Idea-6ebd3569=faa9d4e5-0604-49e7-8d6f-e8cb42e3da0c
    Host: localhost:63342
    Origin: http://localhost:63342
    Referer: http://localhost:63342/html/form_detail.html?_ijt=899jn6q3snt19psj52q3u2sr6a&_ij_reload=RELOAD_ON_SAVE
    sec-ch-ua: “Chromium”;v=“110”, “Not A(Brand”;v=“24”, “Microsoft Edge”;v=“110”
    sec-ch-ua-mobile: ?0
    sec-ch-ua-platform: “Windows”
    Sec-Fetch-Dest: document
    Sec-Fetch-Mode: navigate
    Sec-Fetch-Site: same-origin
    Sec-Fetch-User: ?1
    Upgrade-Insecure-Requests: 1
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.57
    x-forwarded-for: 4.2.2.2
    username=978964140%40qq.com&password=123&password=123&sport=basketball&sport=soccer&sport=ping+pang&sex=male&city=beijing&myfile=
  3. 相对get更安全, 如果要防抓包,还能用https协议;
  4. 理论上没有长度限制;

2.9 其它标签

2.9.1div标签

html学习_第19张图片

2.9.2段落标签

html学习_第20张图片

2.9.3span标签

html学习_第21张图片

3. 课后作业

3.1 作业1

html学习_第22张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业1title>
head>
<body>
<h1 align="center">雇员薪资信息h1>

<table align="center" style="text-align: center" border="2" borderColor="#44309D" bgcolor="#CDCACE" cellspacing="0" width="600">
  <tr>
    <th>编号th>
    <th>名字th>
    <th>性别th>
    <th>薪水th>
    <th>职位th>
    <th>emailth>
  tr>
  <tr>
    <td>111td>
    <td>宋江td>
    <td>td>
    <td>1000.00td>
    <td>总裁td>
    <td>[email protected]td>
  tr>
  <tr>
    <td>111td>
    <td>宋江td>
    <td>td>
    <td>1000.00td>
    <td>总裁td>
    <td>[email protected]td>
  tr>
  <tr>
    <td>111td>
    <td>宋江td>
    <td>td>
    <td>1000.00td>
    <td>总裁td>
    <td>[email protected]td>
  tr>
table>
body>
html>

3.2 作业2

html学习_第23张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业2title>
head>
<body>
<h1 align="center">课程表h1>

<table align="center" style="text-align: center" border="2" borderColor="#6498EE" width="600">
  <tr>
    <th>项目th>
    <th colspan="5">上课th>
    <th colspan="2">休息th>
  tr>
  <tr>
    <th>星期th>
    <th>星期一th>
    <th>星期二th>
    <th>星期三th>
    <th>星期四th>
    <th>星期五th>
    <th>星期六th>
    <th>星期日th>
  tr>
  <tr>
    <td rowspan="4">上午td>
    <td>语文td>
    <td>数学td>
    <td>英语td>
    <td>英语td>
    <td>物理td>
    <td>计算机td>
    <td rowspan="4">休息td>
  tr>
  <tr>
    <td>数学td>
    <td>数学td>
    <td>地理td>
    <td>历史td>
    <td>化学td>
    <td>计算机td>
  tr>
  <tr>
    <td>化学td>
    <td>语文td>
    <td>体育td>
    <td>计算机td>
    <td>英语td>
    <td>计算机td>
  tr>
  <tr>
    <td>政治td>
    <td>英语td>
    <td>体育td>
    <td>历史td>
    <td>地理td>
    <td>计算机td>
  tr>
  <tr>
    <td rowspan="2">下午td>
    <td>语文td>
    <td>数学td>
    <td>英语td>
    <td>英语td>
    <td>物理td>
    <td>计算机td>
    <td rowspan="2">休息td>
  tr>
  <tr>
    <td>数学td>
    <td>数学td>
    <td>地理td>
    <td>历史td>
    <td>化学td>
    <td>计算机td>
  tr>
table>
body>
html>

你可能感兴趣的:(JavaWeb,html,前端,java)