HTML day01 2021-3-30

最新推荐文章于 2024-09-05 14:01:36 发布

ZivChen971206

最新推荐文章于 2024-09-05 14:01:36 发布

阅读量99

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/weixin_44390531/article/details/119674644

版权

前端基础专栏收录该内容

47 篇文章 0 订阅

订阅专栏

什么是HTML？

超文本标记语言（hyper text markup language），用来描述网页的一种语言

含义：

超越了文本的限制，可以加入图片动画多媒体等内容
超级链接文本，可以从一个文件跳转到另一个文件

浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

Web标准

web标准的构成

主要包括结构（structure）、表现（presentation）和行为（behavior）
结构：对网页元素进行整理和分类
表现：设置网页元素的外观样式
行为：网页模型的定义和交互的编写

第一个页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的第一个页面</title>
</head>
<body>
<div>
  <h2>键盘敲烂，工资过万</h2>
</div>
</body>
</html>

常用标签

标题标签 (headline)
段落标签 (paragraph)

在网页中，要把文字有条理的显示出来，需要将这些文字分段显示

1. 文本在一个段落中会根据浏览器大小自动换行

2. 段落和段落之间保有空隙

换行标签（break）

强制换行，意为打断、换行

特点：
标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些间距

体育新闻

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h2>德章泰-穆雷：球队的防守被对方击破了 只想帮助球队赢球</h2>
<h4>直播吧3月30日讯 NBA常规赛，马刺主场115-132不敌国王，赛后马刺球员德章泰-穆雷接受了采访。</h4>
<p>
  谈到对手本场的进攻，穆雷表示：“今晚我们球队的防守是整体被对手的挡拆战术打破了，而不是某一个点被击破。这是整个团队的问题。当对方进行挡拆的时候，你需要一整个队伍来看出对方进攻的套路。他们一直在用同样的进攻方式，抛投、抛投、抛投，三分、三分、三分，我们需要在这方面做得更好。”</p>
<p>谈到自己的表现，穆雷说道：“下半场有些对我的犯规裁判没有吹，但不管我整场比赛得0分也好，得分生涯新高也好，我只想帮助球队赢球。”<br>
  本场比赛，穆雷出战33分钟，18投11中，得到23分8篮板8助攻，但在下半场仅4投1中，得2分。</p>
<p>作者:（JayChan)<br>
  2021-3-30</p>
</body>
</html>

div 和 span

div 和 span是没有语义的，它们就是一个盒子，用来装内容的

div是division的缩写，表示分割、分区

span意为跨度、跨距

div一个人独占一行，用来布局，一行只能放一个div，大盒子

span用来布局，一行上可以多个span，小盒子

说出图像标签哪个属性是必须要写的？src

请说出图像标签中alt和title属性区别? alt 替换文本 title 提示文本

超链接标签

锚点标签：点击链接，可以快速定位到页面中的某个位置

在连接文本的href中，设置属性值#name的形式，如：,

找到目标位置标签，里面添加了一个id属性=刚才的名字，如：

特殊字符

表格标签

基本语法

table 用于定义表格的标签
tr （table row）用于定义表格中的行
td （table data）用以定义表格中的单元格
th（table head）表格的表头标签加粗居中显示

属性

align 对齐
border 边框

结构标签

thead & tbody 可以更好的分清表格结构

合并单元格

跨行合并 rowspan
跨列合并 colspan

列表标签

无序列表（重点）
ul li
ul里只能放li，li中可以容纳所有元素
无序列表带有自己的样式属性
有序列表
ol li
自定义列表
dl dd

表单标签

form 用于定义表单域，实现用户信息的收集和传递
form 会把它范围内的表单元素信息提交给服务器

action 用于指定接收并处理表单数据的服务器程序的url地址
method 用于设置表单数据的提交方式，其取值为get或post
name 用于指定表单的名称，以区分同一页面中的多个表单域

input表单元素

text 文本框
password 密码
radio 单选
checkbox 多选
name 元素的名字
value 元素的值
checked 默认选中
maxlength 最大长度
submit 提交按钮
reset 还原到默认状态
file 上传文件使用

label标签

label标签为input元素定义标注
用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转到或者对应的表单元素上，用来增加用户体验

select表单选项

select 中至少包含一对option
在option中定义selected时，当前项即为默认选中项

文本域表单元素

输入很多文字，大量的文字输入

注册表案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<table>
  <h2>青春不常在，抓紧谈恋爱</h2>
  <tr>
    <td> 性别：</td>
    <td>
      <input type="radio" name="gender" id="male">
      <label for="male">男
        <img src="./img/nan.png" alt="" width="20px">
      </label>
      <input type="radio" name="gender" id="female">
      <label for="female">女
        <img src="./img/woman.png" alt="" width="20px">
      </label>
    </td>
  </tr>
  <tr>
    <td>生日：</td>
    <td>
      <span>
        <select name="" id="year">
          <option value="">--请选择年份--</option>
          <option value="">2010</option>
          <option value="">2011</option>
          <option value="">2012</option>
          <option value="">2013</option>
          <option value="">2014</option>
          <option value="">2015</option>
        </select>
      </span>
      <span>
        <select name="" id="month">
          <option value="">--请选择月份--</option>
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
        </select>
  </span>
      <span>
    <select name="" id="date">
      <option value="">--请选择日期--</option>
      <option value="">1</option>
      <option value="">2</option>
      <option value="">3</option>
      <option value="">4</option>
      <option value="">5</option>
      <option value="">6</option>
    </select>
  </span>
    </td>
  </tr>
  <tr>
    <td>所在地区：</td>
    <td>
      <input type="text" value="北京">
    </td>
  </tr>
  <tr>
    <td>婚姻状况：</td>
    <td><input type="radio" name="condition">未婚
      <input type="radio" name="condition">已婚
      <input type="radio" name="condition">离婚
    </td>
  </tr>
  <tr>
    <td>学历：</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>喜欢的类型：</td>
    <td> 喜欢的类型：
      <label for="1">
        <input type="checkbox" id="1">妩媚的
      </label>
      <label for="2">
        <input type="checkbox" id="2">可爱的
      </label>
      <label for="3">
        <input type="checkbox" id="3">小鲜肉
      </label>
      <label for="4">
        <input type="checkbox" id="4">都喜欢
      </label>
    </td>
  </tr>
  <tr>
    <td>自我介绍：</td>
    <td><textarea name="" id="introduction" cols="20" rows="3"></textarea></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="submit" value="免费注册"><br>
      <input type="radio" checked="checked">我同意注册条款和会员加入标准 <br>
      <a href="#">我是会员，立即登录</a>
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <h3>我承诺</h3>
      <ul>
        <li>年满18岁、单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li>
      </ul>
    </td>
  </tr>
</table>
</body>
</html>

ZivChen971206

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML day01 2021-3-30

什么是HTML？超文本标记语言（hyper text markup language），用来描述网页的一种语言含义：超越了文本的限制，可以加入图片动画多媒体等内容超级链接文本，可以从一个文件跳转到另一个文件浏览器内核浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面Web标准web标准的构成主要包括结构（structure）、表现（presentation）和行为（behavior）结构：对网页元素进行整理和分类表现：设置网页元素的外
复制链接

扫一扫