anonymous的前端学习笔记(1)——HTML基础(1)

最新推荐文章于 2024-11-26 10:19:59 发布

__anonymous

最新推荐文章于 2024-11-26 10:19:59 发布

阅读量787

点赞数

分类专栏： # HTML

本文链接：https://blog.youkuaiyun.com/ycdxw_xx/article/details/105926731

版权

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文深入解析HTML标签，涵盖从基础到进阶的各类标签，包括文本、表单、图像、链接及表格等，详述其属性与用法，帮助读者掌握网页布局与交互设计的核心技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

域名解析

域名 – ip地址 – 220.181.38.149
https://220.181.38.149 – www.baidu.com – DNS解析
{‘www.baidu.com’:‘220.181.38.149’,}

请求和响应

请求:浏览器socket客户端给服务端发信息
响应:服务端socket给客户端回信息

标签分类

两类

内敛标签(行内标签):不独占一行,内敛标签只能嵌套内敛标签：
- <b>b标签</b>
- <i>i标签</i>
- <u>u标签</u>
- <s>s标签</s>
- <button>button标签</button>
- <span>span标签</span>
- <img src="1.jpg" alt="美女图片" title="这是img标签">
- <a href="https://www.baidu.com">a标签</a>
块级标签(行外标签):自己独占一行,可以嵌套内敛标签和某些块级标签： \h1-h6\br\hr\p\div
- h1-h6：<h1>标题1</h1>
- <br>
- <hr>
- <p>这是p标签</p>
- <div>这是div标签</div>
需要注意的p标签:不能嵌套p标签,也不能嵌套块级标签

head标签中的标签

<title></title>	定义网页标题

<meta/>	定义网页原信息\配置信息(了解)

body标签中的基本标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p> #独占一个段落

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线\分割线-->
<hr>

img标签

图片标签
属性 src='图片路径'  网络地址的绝对路径\本地相对路径
示例:
	<img src="1.jpg" alt="一张美女图片" title="美女" width="200" height="200">

a标签超链接标签

属性
href:超链接的地址
target:是否新建窗口
target="_self"  当前窗口打开某个路径对应的html页面
target="_blank" 新建窗口打开某个路径对应的html页面
示例:
	<a href="https://www.baidu.com" target="_blank">百度</a>

列表标签

无序列表:    
<ul type="">
        <li>Python</li>
        <li>JavaScript</li>
        <li>PHP</li>
    </ul>
有序列表:
    <ol type="a" start="2">
        <li>Java</li>
        <li>Go</li>
        <li>C</li>
        <li>C++</li>
    </ol>

标题列表标签

<dl>
  <dt>电脑</dt>
  <dd>Alienware</dd>
  <dd>玩家国度</dd>
  <dt>手机</dt>
  <dd>iPhone</dd>
  <dd>HUAWEI</dd>
</dl>

特殊字符

空格: 
小于号:<
大于号:>
&符号:&
...

表格标签(重点)

table
- cellpadding:文字和内边框的距离
- cellspacing:内边框和外边框的距离
- border:边框宽度

<table border="1" cellpadding="5" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>40</td>
                <td>trave</td>
            </tr>
            <tr>
                <td>小刚</td>
                <td>38</td>
                <td>Make money</td>
            </tr>
            <tr>
                <td>小华</td>
                <td>18</td>
                <td>computer games</td>
            </tr>
        </tbody>
    </table>

form标签表单标签和input标签用户输入或者选择使用的标签

action:指定数据提交路径
input标签:
- type属性:控制输入框的样式的
- name属性:分组,携带数据的key key:value
- value:选择框提交数据的时的值,输入框的默认值
input type属性的值:
- text 单行输入文本 <input type=text" />
- password 密码输入框（不显示明文） <input type="password" />
- date 日期输入框 <input type="date" />
- checkbox 复选框 <input type="checkbox" checked="checked" name='x' />
- radio 单选框 <input type="radio" name='x' />
- submit 提交按钮 <input type="submit" value="提交" /> #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
- reset 重置按钮 <input type="reset" value="重置" /> #页面不会刷新，将所有输入的内容清空
- button 普通按钮 <input type="button" value="普通按钮" />
- hidden 隐藏输入框 <input type="hidden" />
- file 文本选择框 <input type="file" />

    <form action="http://127.0.0.1:8001">

            用户名:<input type="text" name="username" value="xiaoming">
            密码:<input type="password" name="password" value="123456">

            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="2">女

            <input type="checkbox" name="hobby" value="a"> computer games
            <input type="checkbox" name="hobby" value="b"> programing
            <input type="checkbox" name="hobby" value="c"> parachute
            <input type="submit">
            <hr>
        	<input type="date">
        	<input type="button" value="普通按钮">
        	<input type="reset">
        	<input type="hidden">
        	<input type="file">
    </form>
  
form表单触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通的按钮
    	<input type="submit">
    	<button>提交按钮</button>
   
input标签的其他属性
	checked默认选中
	<input type="radio" name="sex" value="2" checked="checked">女
	 <input type="radio" name="sex" value="2" checked>女   #简写方式,当属性名和属性值相同时		可简写
     <input type="checkbox" name="hobby" value="a"> computer games
     <input type="checkbox" name="hobby" value="b" checked="checked"> programing
     <input type="checkbox" name="hobby" value="c" checked="checked"> parachute

	readonly  只读 针对的是输入框  text password
	disabled  不允许操作  所有的input都可以设置
设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的

select标签下拉选择框

单选
	<select name="city">
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
    </select>
多选:multiple
	<select name="city" multiple>
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
   </select>

label标签

标识标签的功能的

方式1:for:执行对哪个标签进行标识
效果:点击label标签中的文字,就能让标识的标签获得光标
<label for="username">用户名</label>
<input id="username" type="text" name="username" value="dazhuang">
方式2:
        <label>
            密码:<input type="password" name="password" value="111" disabled>
        </label>

textarea多行文本

<label>
        <textarea name="aa" id="bb" cols="30" rows="10" placeholder="请输入文字~"></textarea>
        <textarea name="aa1" id="bb1" cols="30" rows="10" placeholder="请输入文字~">默认内容</textarea>
</label>
name：名称
rows：行数  #相当于文本框高度设置
cols：列数   #相当于文本框长度设置
disabled：禁用
placeholder：提示信息