HTML基础笔记(一)

文章目录

  • 絮叨一下
  • html 基础笔记
    • meta 的相关属性
    • 标题
    • 表格标签
      • 合并单元格
      • 特性
    • 列表
    • a 标签
    • 表单
      • 表单域
      • 表单元素 input
      • lable 标签
      • select 下拉
      • textarea 文本域
      • 引用
      • 布局标签
    • 多媒体
      • audio
  • 写给看到最后的你

絮叨一下

学习爬虫的话总是需要一些 html css js 基础的要不一些反爬都可能过不去 在接下的一段时间内 重点分享一些 学习笔记 .

html 基础笔记

参考文档

meta 的相关属性

元数据

<meta charset="UTF-8">
<meta name="keywords" content="关键词1,关键词2">
<meta name="description" content="简单描述">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 响应式,优化手机端


width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。  
height:和 width 相对应,指定高度。  
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。  
maximum-scale:允许用户缩放到的最大比例。  
minimum-scale:允许用户缩放到的最小比例。  
user-scalable:用户是否可以手动缩放。  

标题

如果两个标题标签在一起可以使用

<hgroup>
    <h1>h1>
    <h2>h2>
hgroup>

一般一个文档中有且只有一个h1
h 系列 为语义标签 , 有助于搜索引擎抓取

表格标签

    <table>table> : 用于定义表格标签

    <tr>tr>:定义表格中的行

    <td>td>:用于定义表格中的单元格

    <th>设置表头标签th>

本身自带属性 并非css属性 这是不一样的

属性 含义
align 设置对齐方式
border 设置边框 1 或者空
cellpadding 像素值 (文字与边框的距离)
cellspacing 像素值 (单元格与单元格之间的距离)
width 像素值或者是百分比
bgcolor 设置单元格和表格背景颜色

合并单元格

行合并:rowspan=""
列合并:colspan=""
合并规则:行合并在上 列合并在左
细线边框:border-collpase:collpase;

特性

行等高 列等宽
表格不设置宽高 内容自己撑开
设置宽高 默认由你自己设置的撑开

列表

无序列表:

<ul>
    <li>   li>
    <li> li>
ul>


有序列表:

<ol>
    <li>li>
    <li>li>
ol>

自定义列表:

<dl>
    <dt>标题dt>
    <dd>子标题dd>
dl>

a 标签

<a href="目标地址" target="打开方式_blank  _self">a>

<base  href="基础地址" target="_blank">

锚点:回到界面某一个部分
<a href="新页地址#id值" target="打开方式_blank  _self">a>

id="big_box"  通常: _ 连接    class="big-box" -连接    标识符

css 属性 :

属性 含义
text-decoration: underline; 默认有下划线
text-decoration:none; 取消下划线

表单

表单域

<form action="url地址" method="提交方式" name="表单名称">form>

表单元素 input

  • type属性

    属性 含义
    button 定义可点击按钮
    checkbox 定义复选框
    file 定义输入字段和浏览按钮共文件上传
    hidden 定义隐藏的输入字段
    image 定义图形的提交按钮
    password 定义密码字段
    radio 定义单选按钮
    reset 定义重置按钮
    submit 定义提交按钮
    rext 定义单行输入的字段
  • 其他属性

    属性 含义
    name 定义input 的名称 在设置单选的时候需要设置相同 的name属性 来实现 单选 一组的时候需要name 相同
    value 规定 input 元素的值
    checked 规定这个input元素首次加载时应该时候被选中
    maxlength 规定输入 的字段中的字符最大长度
    checked 默认选中
    reqired 不能为空

lable 标签

<lable for="sex"> lable>
<input type="redio" name="sex" id="sex">


select 下拉

<select>
    <option>option>
     <option>option>
select>

在select 中定义selected="selected"时候默认选中

textarea 文本域

输入内容比较多的时候使用

<textarea>
textarea>

参数:cols 每行多少字 rows 多少行

引用

布局标签

    <body>
        <header>
            
        header>

        <main>
            
        main>

        <footer>
            
        footer>


    body>

多媒体

audio

<audio src="文件.mp3" controls>audio>
属性 含义
controls 浏览器提供一个可以暂停,开始的界面
autoaply 是否自动播放不建议使用,而且不好用
loop 布尔属性,是否循环播放

由于浏览器的不同对文件类型以及编码不同,可以使用内嵌

注意浏览器兼容性

<audio controls>
  <source src="foo.wav" type="audio/wav">
  Your browser does not support the <code>audiocode> element.
audio>

写给看到最后的你

朋友,感谢你看到了最后,新手报道,技术不成熟的地方请多多指点,感谢!

公众号:Linux下撸python
期待和你再次相遇
愿你学的愉快

在这里插入图片描述

你可能感兴趣的:(css,html,python,web)