HTML学习的第一天总结

最新推荐文章于 2024-09-26 13:48:58 发布

千寻度

最新推荐文章于 2024-09-26 13:48:58 发布

阅读量60

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_46491493/article/details/128902459

版权

本文介绍了HTML的基本结构，包括元标签的使用如keywords和description，以及HTML中的段落、标题、样式控制、JavaScript行为。还涵盖了字符集、图片插入、超链接、列表和表单元素，这些都是网页开发的核心要素。

摘要由CSDN通过智能技术生成

html :hypertext markup language 超文本标记语言

html 结构

css 样式

JavaScript 行为

为了偏向爬虫程序的喜好，可适当填写内容便于识别

<meta content="书籍" name="keywords">
<meta content="这是你不想脱的鞋子！" name="discription">

<html>根标签
    结构化标签
    <head>
        <meta chartset="utf-8"> charset编码字符集
    </head>给网站的
    <body>
        <p>段落标签</p>    独占一行
        <h1>标题</h1>     标题级别
        <h6>标题</h6>     h${标题}*6
        <strong>加粗</strong> 加粗
        <em>斜体</em>         斜体
        <del>划线</del>       划线
        <address>地址</address>地址
        
        常用（容器）：
        <div>阿巴阿巴</div>     独占一行
        <span>阿巴阿巴</span>   连在一起
        
        <div style="color: #f40;">
        <div>阿巴阿巴1</div>
        <div>阿巴阿巴2</div>
        <div>阿巴阿巴3</div>
    </div>
    </body>给用户的
</html>

charset有四种：

gb2312（不支持繁体中文）
gbk（支持繁体中文）
utf-8 (unicode的升级版)
unicode

空格回车在html中是文本分割符

空格文本的展示形式：

html编码：

空格 &nbsp；

小于 &lt；less than

大于 &gt；great than

换行 <br>

水平线 <hr>

有序列表

<ol type='1'>
    <li>C语言</li>
    <li>python</li>
    <li>Java</li>
</ol>

type有4种类型

1(默认)

a

A

i(罗马数字)

倒着排序：reversed="reversed"

从第几开始排序：start="数字"

无序列表

<ul type="disc">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

type有4种类型

disc(默认) 实心圆
circle
square
i(罗马数字)

图片

<img src="图片地址" style="width: 500px;" alt="一闪一闪亮星星" title="这是一张图片" >

alt属性 图片占位符是为了防止图片加载不出来进行解释说明

title 图片提示符当鼠标移到图片上时会显示图片信息

图片地址：

网上的url
本地图片的绝对路径
本地图片的相对路径

超链接

`<a href="网址">超链接的内容`</a>

href hypertext reference 超文本引用 a an

<a href="https://taobao.com">淘宝</a>

点击图片可在另一个网页打开淘宝

<a href="https://taobao.com" style="width:100px;height: 100px;background-color: red;display: block" target="__blank__"></a>`

锚点

a标签一开始是用来定位的

<a href="#demo">find_demo`</a>

打电话

<a href="tel:1234">打电话</a>

发邮件

<a href="mailto:2997982932@qq.com">发邮件</a

<a href="javascript:while(1){alert('让你手欠')}">协议限定符</a>

form表单

（1）用户信息

form method="get" action="">
		`<p>`
			`username:<input type="text" name="User" value="请输入用户名" style="color:#999" οnfοcus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" οnblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">`
		`</p>`
		`<p>`
			`password:<input type="password" name="password" value="请输入密码">`
		`</p>`
		`<input type="submit" value="login">`
`</form>

metion 发送数据的方式，有get和pose

action 是数据接受端的地址

（2）单选框

你喜欢什么水果？`
1.苹果<input type="radio" name="fruit" value="apple">`
2.香蕉<input type="radio" name="fruit" value="xiangjiao">`
3.橘子<input type="radio" name="fruit" value="orange">`

<input type="submit">`

注：提交数据需要name 和 value

checked="checked"默认选中

（3）复选框

type='"checkbox"'

（4）选择框

`<select name="province">`
    `<option>beijing</option>`
    `<option>tianjin</option>`
    `<option>shanghai</option>`
`</select>`

主流浏览器及其内核

IE Trident
Firefox Gecko
Google chrome Webkit/Blink
Safari Webkit
Opera Persto

千寻度

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫