HTML学习笔记整理

白杨木影子被拉长
207 阅读5分钟

HTML简介

  • HTML(Hyper Text Markup Language)超文本标记语言
  • HTML是一种标记语言
  • HTML使用标记标签来描述网页，告诉浏览器网页的内容和结构

基础模板：

<!DOCTYPE html> /* 声明该网页是 HTML5.0 的版本 */
<html lang="en"> /* 提示网页所用的语言是英语 */
<head>
    <meta charset="UTF-8"> /* 规定网页的字符编码 */
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> /* 解决IE兼容性差的问题 */
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    /* viewport：网页视口属性 
    width=device-width：视口宽度=设备宽度
    initial-scale=1.0：网页第一次加载时的缩放比例，1.0表示不缩放 */
    <title>Document</title> /* 设置网页的标题 */
</head>
<body>

</body>
</html>

元素

开始标签+结束标签+包裹的内容为一个元素。

image.png

块级元素

  • 在页面以块的形式展现
  • 出现在新的一行
  • 占全部宽度

常见：h1-h6，p，hr，div，form，ul（li），ol（li），dl（dt，dd），blockquote，address等。

注意：只有文字才能组成段落，因此，p 里面不能放块级元素，同理还有这些标签 h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

内联元素（行内元素）

  • 通常在块级元素内
  • 不会导致文本换行
  • 只占必要的部分宽度

常见：a，i，b，strong，em，small，mark，span，label，select，cite，q，code，time，data等。
特殊：img 和 input 是行内块。
   a 的内部可以嵌套块级元素（可以被块级元素撑开），但不能嵌套 a。

常用标签

image.png 注：

image.png

网页布局标签（都是块级元素）

image.png

其他常用标签

a超链接标签：

image.png

img图片标签：

image.png

ul无序列表：

image.png

ol有序列表：

image.png

dl列表：

image.png

figure图像区域元素

image.png

iframe网页容器

image.png

table表格

caption 标题

tr 行

td 标准单元格  th 表头单元格，默认字体加粗，水平居中

表格属性:

  • border 外边框
  • cellspacing 单元格间距（外）
  • cellpadding 单元格边距（内）
  • width 宽度
  • height 高度
  • align 水平对齐方式（left center right）
  • valign 垂直对齐方式（top middle bottom）
  • colspan 跨列（水平）合并单元格
  • rowspan 跨行（垂直）合并单元格
  • bgcolor 背景色：
    • 颜色名称(red红色,gray灰色等)
    • 颜色16进制代码(#000000黑色，#ffffff白色)
    • rga模式：如rga(204,97,70)
  • background 背景图片

form表单

表单用于收集用户信息，并将数据提交给服务器。

url：统一资源定位符，也叫网址。

a68d9b2aad95815595bb8748af04fb89c57c9d2e8a459a89f16dd636e80ed0cd.png

表单提交的数据最终提交给113.62.116.193服务器上的443端口对应的软件。

表单以action?name=value&name=value&name=value&name=value……这种格式提交给服务器。

表单属性

action属性

action属性用来指定数据提交给哪个服务器。

表单的ation属性和超链接的href属性都可以向服务器发送请求，只不过表单发送请求的同时还可以携带数据。

method属性

method属性指定提交表单数据时要使用的 HTTP 方法。

get请求(默认)：数据以查询参数的方式传递。
优点:数据传输比较快。缺点: 直接能在地址栏看见数据，传输数据大小有限制，只能传递字符串。
如果是get请求可以不写method属性。

post请求：数据通过请求体传递，在地址栏上看不见数据。
缺点: 数据传输没get快。缺点: 数据在请求体相对安全，传输数据没有限制，可以传递各种数据。

表单控件

input

input元素根据不同的type属性，可以变化为多种形态。

属性

  • value：表单控件中所输入的值或指定的初始值。
  • readonly：规定输入内容只读，不能修改，但可以提交。
  • disabled：元素被禁用，显示为灰色，不能选择也不能提交。
  • maxlength：输入字符的最大值。
  • placeholder：输入内容为空时显示的提示文字。
  • required：必填属性，如果输入框没有输入值，提交的时候会有提示信息。
  • checked：单选框或多选框的选项默认被选中。

type属性的值

  • text：文本输入框。
  • password：数据以密文方式显示。
  • number：数字输入框。min 最小值，max 最大值，step 递增步长。
  • radio：单选按钮，name属性必须一致，才能实现单选。
  • checkbox：多选框，name属性须一致。
  • email：邮箱输入框，如果输入的不是邮箱格式，会有提示。
  • tel：电话号码输入框，需要配合patten属性设置正则。
  • hidden：输入框是隐藏状态，网页上看不见，但数据可以提交。
  • file：文件上传，form表单必须设置enctype="multipart/form-data"。
  • button：普通按钮，没有任何功能。
  • submit：提交按钮，用于提交数据。
  • reset：重置按钮，把表单中的数据还原为初始值。

select

select 下拉菜单，配合<option>标签设置选项。

属性：
multiple：可以选中多个选项(按住ctrl多选)。
size：设置显示条目数量。
selected(option的属性)：设置默认选中项

textarea

textarea 多行文本输入框（文本域）。

属性：
minlength：最小输入字符。
maxlength：最大输入字符。
rows：文本框的高度，单位是行。
cols：文本框的宽度，单位是字符。

示例：

<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>
    <form action="http://192.168.111.3:8080/oa/save" method="get" enctype="multipart/form-data">
        <p>用户名<input type="text" name="username" maxlength="8" placeholder="请输入8个字符以内的用户名" readonly/></p>
        <p>密码<input type="password" name="userpwd" disabled/></p>
        <p>确认密码<input type="password"/></p>
        <p>年龄<input type="number" name="age" min="12" max="18" step="1"/></p>
        <p>
            性别
            <input type="radio" name="gender" value="1"/>男
            <input type="radio" name="gender" value="0"/>女
        </p>
        <p>
            兴趣爱好
            <input type="checkbox" name="hobby" value="c"/>唱
            <input type="checkbox" name="hobby" value="t"/>跳
            <input type="checkbox" name="hobby" value="r"/>rap
            <input type="checkbox" name="hobby" value="l" checked/>篮球
        </p>
        <p>邮箱<input type="email" name="email"/></p>
        <p>手机号码<input type="tel" name="tel" pattern="1[3-9]\d{9}"/></p>
        <p>隐藏输入框: <input type="hidden"/></p>
        <p>上传文件<input type="file" /></p>
        <p>
            段位
            <select name="grade" required multiple size="4">
                <option value="qt">青铜</option>
                <option value="by">白银</option>
                <option value="hj">黄金</option>
                <option value="bj" selected>铂金</option>
                <option value="zs">钻石</option>
                <option value="ds">大师</option>
                <option value="wz">王者</option>
            </select>
        </p>
        <p>
            简介
            <textarea name="introduction" minlength="10" maxlength="200" rows="10" cols="80" required placeholder="个人简介"></textarea>
        </p>
        <p><input type="button" value="按了没用"></p>
        <p><input type="submit" value="确定"> <input type="reset" value="清空"></p>
    </form>
</body>
</html>

image.png

avatar
文章
阅读
粉丝